《
简单了解CSS的查找匹配原理》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345292013.htm
p.red{color:red;}
1.不要在ID抉择器前应用标签名
匹配原理：
正常写法：DIV#divBox
一般写法：#divBox p .red{color:red;}
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再断定p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
更好写法：.red
说明： 同第一条，但假如你定义了多个.red，而且在不同的元素下是款式不一样，则不能去掉，比方你css文件中定义如下：
浏览器从右到左进行查找的利益是为了尽早过滤掉一些无关的样式规矩和元素。比如如下html跟css:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前经常犯的毛病，还老认为这样写才是高效的)：
--> [
网站建设之]简单了解CSS的查找匹配原理
更好写法：.red{..}
2.不要再class取舍器前使用标签名
4.使用class取代层级关系
更好写法：#divBox
个别写法：#divBox ul li a{display:block;}
解释： 由于ID挑选器是独一的，加上div反而增添不用要的匹配。
简练、高效的CSS:
普通写法：span.red
如果是这样定义的就不要去掉，去掉后就会混杂，不外倡议最好不要这样写
<style>
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox",简单了解CSS Sprites（图片合并）技术;>
<p><span>s1</span></p>
<p><span>s2</span></p>
,简单6步 打造B2C电子商务网站; <p><span>s3</span></p>
<p>,第三代思维指导下的网站建设具体操作;<span class='red'>s4</span></p>
</div>
</body> 如果按从左到右查找，哪会先查找到良多不相干的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到的元素,第9页：复习css。firefox称这种查找方法为key selector(要害字查问)，所谓的症结字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
3.尽量少使用层级关联
span.red{color:#ff00ff}
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。好比之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找次序如下：
有人使用CSS良久也不清楚CSS的真正匹配原理，下面我们就来简单懂得一下CSS的查找匹配原理：
Tag：CSS 查找匹配原理 CSS 查找匹配原理
更好写法：.block{display:block;}
看1个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯咱们对这个CSS 的懂得是，阅读器先查找id为divBox的DIV元素，当找到后,第8页：第5日的css练习，再找其下的所有p元素，而后再查找所有span元素，当发明有span的class为red的时候，就利用该style。如许简略易懂的原理，可是这个理解却是完完整全相反、过错的。
(责任编辑：网站建设)
简单了解CSS的查找匹配原理相关文章