CSS选择器是从左往右进行解析的,实际上恰恰相反,CSS选择器是从右往左解析的。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

DIV#divBox p span.red{color:red;}

如果按从左到右查找,哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找,则首先就查找到的元素。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;}