- 对选择器不了解的小伙伴可以看之前这篇css 选择器
正文
- id选择器优先级很高,权值为100
- class,属性和伪类选择器的权值为10
- 标签选择器权值为1
- 在比较样式的优先级时,只需统计选择符中的id,class和标签名的个数,然后把相应的权值相加即可,最后根据结果排出优先级
- 权值较大的优先级越高
- 权值相同的,后定义的优先级较高
样式值含有!important,优先级最高
1
2div .class1 #people //权值等于1+10+100=111
.class2 li #age //权值等于10+1+100=111后代选择器的定位原则:在这里介绍一下对于后代选择器,浏览器是如何查找元素的呢?浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。
- 比如 div#divBox p span.red{color:red;}, 浏览器的查找顺序如下: 先查找html中所有 class=’red’ 的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上.
- 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。