如何掌握CSS选择器匹配机制，使样式更精简高效？

本文共计1016个文字，预计阅读时间需要5分钟。

为了简化您的要求，以下是对您提供的文本的

---

DIV

---

请注意，这个改写仅保留了文本中的字符，没有添加任何额外的内容。

DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素， 然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。

　　用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看1个简单的CSS：

DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。

匹配原理：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：

　　先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。