看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元素，如果都存在则匹配上。 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css: 如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。 简洁、高效的CSS: 所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)： 1.不要在ID选择器前使用标签名 一般写法：DIV#divBox 更好写法：#divBox 解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。 2.不要再class选择器前使用标签名 一般写法：span.red 更好写法：.red 解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下： p.red{color:red;} span.red{color:#ffff} 如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写 3.尽量少使用层级关系 一般写法：#divBox p .red{color:red;} 更好写法：.red{..} 4.使用class代替层级关系 一般写法：#divBox ul li a{display:block;} 更好写法：.block{display:block;} PS：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考 mozilla firefox： google page-speed：
推荐整理分享了解CSS的查找匹配原理，让CSS更简洁、高效(css查找元素)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css中search,css查找元素,用css设计一个搜索网页,css匹配,css中search,css中search,css中search,css怎么弄出搜索按钮,内容如对您有帮助，希望把文章链接给更多的朋友！
Zen Coding 快速编写HTML/CSS代码的实现 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大
Zen Coding css,html缩写替换大观 快速写出html,css 阅读本文，先仔细阅读网站文章。ZenCoding快速编写HTML/CSS代码的实现E元素名称(div,p);E#id使用id的元素(div#content,p#intro,span#error);E.class使用类的元素(div.header
javascript代码规范小结 1.Javascript代码应符合Douban-JSLint检验标准1-1.语句必须都有分号结尾，除了for,function,if,switch,try,while1-2.只有长语句可以考虑断行，如：TEMPL_SONGLIST.replace('{TA
