用了这么多年的CSS，现在才明白CSS的真正匹配原理

使用 CSS 这么多年，我现在明白了 CSS 真正的匹配原理。我想知道你和我一样吗？看一个简单的 CSS：

DIV#divBox p span.red{color:red;}，根据我们对这个CSS的理解，浏览器首先查找id为divBox的DIV元素，找到后，再查找其下的所有p元素，然后查找所有span元素，当发现span的类为红色时应用样式。多么简单易懂的原理，但这种理解是完全相反和错误的。

匹配的规则：

浏览器 CSS 匹配不是从左到右看，而是从右到左看。比如前面提到的DIV#divBox p span.red{color:red;}，浏览器的搜索顺序如下：

先在html中找到所有class=”red”的span元素，找到后，找出其父元素中是否有ap元素css中的通配选择器，然后判断其父元素中是否有id为divBox的div元素pcss中的通配选择器，如果都存在，匹配它。

从右到左的浏览器查找的好处是尽早过滤掉无关的样式规则和元素。例如下面的 html 和 css：

风格>

DIV#divBox p span.red{color:red;}

风格>

身体>

分区>

p>span>s1span>p>

p>跨度>s2span>p>

p>跨度>s3span>p>

p>跨度>

分区>

身体>

如果从左到右搜索，首先会发现很多不相关的 p 和 span 元素。另一方面，如果从右向左搜索，则找到的元素是第一个。Firefox 将此搜索方法称为键选择器（关键字查询）。所谓keyword就是样式规则中最后（最右边）的规则，上面的key就是span.red。

干净、高效的 CSS：

所谓高效 CSS 就是让浏览器在寻找与样式匹配的元素时尽量少搜索。以下是我们在编写 CSS 时常犯的一些低效错误（也是我曾经犯过的一个错误，我一直认为它是这样写的）是有效的）：

1.不要在 ID 选择器之前使用标签名

一般写法：DIV#divBox

更好的拼写：#divBox

说明：因为 ID 选择器是唯一的，添加 div 会增加不必要的匹配。

2.不要在类选择器之前使用标签名

一般写作：span.red

更好的拼写：.red

说明：和第一项一样，但是如果你定义了多个.red，并且不同元素下的样式不一样，就不能移除了。例如，您在 css 文件中定义以下内容：

p.red{颜色：红色；}

span.red{颜色：#ff00ff}

如果是这样定义的，不要去掉，去掉后会比较混乱，但是最好不要这样写

3.使用尽可能少的层次结构

一般写作：#divBox p .red{color:red;}

更好的书写方式：.red{..}

4.使用类而不是层次结构

一般写法：#divBox ul li a{display:block;}

更好的写法：.block{display:block;}