css优先级及匹配原理

css优先级及匹配原理

css选择器一般可以分为三种：标签选择器、类选择器和ID选择器。

而后代选择器和群组选择器只是对上面三种选择器的扩展应用。还有在标签内写style=""的方式，应该是css的一种引入方式，而不是选择器。

-后代选择器，如 .polaris span img{}

-群组选择器，如 div,span,img{}

 

选择器的优先级

选择器指向的越准确(后代选择器)，优先级越高。

通常我们用1表示 标签选择器 的优先级；

           用10表示 类选择器 的优先级；

　　　　用100表示 ID选择器 的优先级。

 

如, .polaris span{color:red;} 的优先级是 10 + 1   =》11

     .polaris{color:blue}的优先级是 10

此时匹配到的是red

 

如，div.test1 .span var   的优先级 1+10 +10 +1

      span#xxx .songs li  的优先级 1+100 +10 +1

      #xxx li                    的优先级 100 +1

 

 

后代选择器的匹配原则

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。如，DIV#divBox p span.red{color:red;}，浏览器的查找顺序：先查找所有class='red'的span元素，再找其父级元素中有无p元素，再找p的父级元素中id为divBox的div元素，如果找到则匹配。

 

如果从左到右查找，会找到很多不相关的p和span元素，而从右到左查找，首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector。

 

简洁高效的css

高效就是让浏览器在查找匹配元素的时候尽量进行少的查找。

1.不要在ID选择器、class选择器前使用标签名

div#divBox     span.red         =>   #divBox     .red

这样更简洁，也会去掉不必要的查找匹配。

 

2.尽量少使用层级关系

如， #divBox p .red{color:red;}   =》 .red{color:red}

 

posted on 2015-08-08 13:54 Rhett_Web 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/rhett-web/p/4713051.html