织梦DEDECMS模板制作之怎么样理解CSS的匹配原理
不管我们做什么网站，织梦模板网站还是其他的网站，DIV+CSS都是很重要的。这段时间都在学习DIV+CSS，学习了这段时间，也终于明白了CSS的匹配原理，下面用一个简单的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元素，如果都存在则匹配上。 本文来自浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css：
<style>
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector（关键字查询），所谓的关键字就是样式规则中最后（最右边）的规则，上面的key就是span.red。
简洁、高效的CSS写法
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误（也是我以前常常犯的错误，还老以为这样写才是高效的）：
仿站咨询扫二维码
仿站教程推荐
- 相关链接：
- 教程说明：
织梦DEDECMS模板制作之怎么样理解CSS的匹配原理
。
