了解CSS的查找匹配原理，让CSS更简洁、高效

用了这么多年的CSS现在才明白CSS的真正匹配原理不知道你是否也跟我一样看1个简单的CSSDIV#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中所有classred的span元素找到后再查找其父辈元素中是否有p元素再判断p的父元素中是否有id为divBox的div元素如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:1234567891011styleDIV#divBox p span.red{color:red;}stylebodydividdivBoxpspans1/span/ppspans2/span/ppspans3/span/ppspanclassreds4/span/p/div/body如果按从左到右查找哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找则首先就查找到span classred的元素。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:#ff00ff}如果是这样定义的就不要去掉去掉后就会混淆不过建议最好不要这样写3.尽量少使用层级关系一般写法#divBox p .red{color:red;}更好写法.red{..}4.使用class代替层级关系一般写法#divBox ul li a{display:block;}更好写法.block{display:block;}