《
理解CSS的查找匹配原理，让CSS更简洁高效》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344122013.htm
如果是这样定义的就不要去掉，去掉后就会混杂，不外倡议最好不要这样写
匹配原理：
3、尽量少应用层级关联
许多友人用了很多年的CSS才清楚CSS的真正匹配原理，不晓得你是否也是这样？通过本文的学习理解CSS的查找匹配原理，让CSS更简洁高效。
p.red{color:red;}
1、不要在ID取舍器前使用标签名
更好写法：.red
普通写法：#divBox ul li a{display:block;}
2、不要再class抉择器前使用标签名
4、使用class取代层级关系
span.red{color:#ff00ff}
看1个简略的CSS：
Tag：CSS 查找匹配 CSS 查找匹配
正常写法：DIV#divBox
浏览器从右到左进行查找的利益是为了尽早过滤掉一些无关的款式规矩跟元素。比方如下html和css:
更好写法：.block{display:block;}
说明： 同第一条，但假如你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，好比你css文件中定义如下：
复制内容到剪贴板 <style> ,
澄清display inline;与float left;的用途; 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>
浏览器CSS匹配不是从左到右进行查找,清楚用户注册动机进行有效的引导注册设计，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找次序如下：
所谓高效的CSS就是让阅读器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些咱们常见的写CSS犯一些低效毛病(也是我以前经常犯的过错，还老认为这样写才是高效的)：
一般写法：#divBox p .red{color:red;}
--> [
网站建设之]懂得CSS的查找匹配原理，让CSS更简洁高效
更好写法：.red{..}
如果按从左到右查找，哪会先查找到良多不相干的p和span元素。而如果按从左到右的方法进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(症结字查问)，所谓的要害字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简练、高效的CSS:
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，而后再查找所有span元素，当发明有span的class为red的时候，就利用该style。如许简单易懂的原理，可是这个理解却是完完整全相反、错误的。
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再断定p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
个别写法：span.red
更好写法：#divBox
解释： 由于ID挑选器是独一的，加上div反而增添不用要的匹配。
(责任编辑：网站建设)
理解CSS的查找匹配原理，让CSS更简洁高效相关文章