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}