近期考虑对CSS进行一些重构，看着以前自己的代码整个人凌乱了。于是做了一些调研，看到一些不一样的地方给大家分享一下。

一、CSS的匹配规则

1、根据CSS定义位置来区别

平常所认为的优先级规则，从根本上来讲是片面的。

默认样式<外部样式表<内部样式表<行内样式    //是片面的

浏览器默认样式最低，行内样式最高，这是肯定的。
但是外部样式表和内部样式表其实优先级并没有太大的区别，只是我们一般都会在head中先引用外部样式表，再定义内部样式表，才形成了以上的观点。（你完全可以把外部样式表放到body的下面，虽然不太好但是规则是允许的）
对于所有的非行内自定义样式（可以统一称为样式表），

样式表的优先级完全取决于被引入或者定义的位置。

2、根据选择器的优先级来确定

选择器的优先级规则为：ID > 伪类 > 属性 > 类 > 元素 > 通配符，对于组合选择器的优先级就对以上规则从左到右依次进行比较，知道可以得出结果。
例如：#test_id div 则比#test_id .test_class的优先级要低。
通常为了保证样式的准确性，我们会使用较高优先级的选择器，或者使用多种选择器的组合形式。

3、!important

最高优先级

二、CSS选择器解析规则

前面讲到，为了保证样式应用的准确性，会使用多种选择器的组合形式。于是，就有了一些比较极端的写法——总是或者尽量使用更多层级的选择器组合。
从准确性来看，毫无问题；从性能上看，这样会有什么问题吗？
显然，这涉及到CSS的匹配规则。

1、从右到左的匹配规则

通常思维是选择器指定越详细，则越容易匹配，性能越好。这种观点建立的基础是，对每一个CSS样式去查询匹配dom中的节点，那么选择器的详细程度越高，就越能减少查询的冗余，性能越好。例如：

.test_class .test_span1{} // 样式1
.test_class .test_div1 .test_span1{} // 样式2
// 布局
<div class="test_class">
        <div class="test_div1"><span class="test_span1">测试1</span></div>
        <div class="test_div2"><span class="test_span2">测试2</span></div>
</div>

按照上述规则，样式1会比样式2多做一次比较，即对test_span2的比较。
这种CSS查询匹配dom节点的方式，就是常说的从左到右的匹配规则（针对CSS选择器而言）——针对样式1，从左到右匹配5次，从右到左匹配7次。

2、从右到左的匹配规则

还有一种思维是选择器指定越精简，则越容易匹配，性能越好。这种观点建立的基础是，对每一个dom节点去查询匹配CSS中的样式，那么选择器的详细程度越高，查询匹配的次数就越多，性能越差。例如：

 .test_div1 .test_span{} // 样式1
.test_class .test_div1 .test_span{} // 样式2
// 布局
<div class="test_class">
        <div class="test_div1"><span class="test_span">测试1</span></div>
</div>

按照上述规则，针对“测试1”的样式匹配，样式1要比样式2少1次匹配。这种dom节点查询匹配CSS选择器的方式，就是常说的从右到左的匹配规则（针对CSS选择器而言）——针对样式1，从左到右匹配3次，从右到左匹配2次。

3、CSS选择器匹配规则

事实上虽然上述两种匹配方式都有一定到理论性，但是结论只有一个——从右到左。至于原因，先来看一下一些有趣的回答。

3.1 哲学思维

人可以选择两条路，但是真正走的却只有一条。

最根本的道理。

3.2 价值取向

英文顺序一般先小后大，先具体后宽泛，例如姓名是先名后姓，地址是X号X街X城市X州、日期是日/月/年。
西方比较强调个体价值，中国比较强调家族观念。
而从右到左正好符合了西方的个体价值观。
——很性感的思维。

3.3、Sunday算法

这里只做了一个概述，具体的可以自己百科一下，还挺有意思的。

Sunday算法是Daniel M.Sunday于1990年提出的字符串模式匹配。其核心思想是：在匹配过程中，模式串发现不匹配时，算法能跳过尽可能多的字符以进行下一步的匹配，从而提高了匹配效率。

而从右向左也正符合这一算法。

3.4、浏览器加载方式

访问网页的整个过程在浏览器的表现：

请求数据－－词法语法解析－－下载link文件－－生成dom树－－构建render树－－绘制

而CSS样式的匹配正是在构建render树时进行的，所以需要采用对每个dom节点查询匹配CSS选择器的方式，即从右到左的匹配规则（从1、2可以知道这样匹配的次数较少）。

三、结论

很显然，我们在定义样式的选择器时，在准确表达的情况下，应该尽量较少选择器组合中的冗余，从一定程度上提升CSS的性能。

CSS选择器匹配规则