选择器类型
选择器 | 例子 |
---|---|
Style | style=" " |
ID | #id{} |
Class | .class{} |
标签 | div{};view{} |
属性 | [type=‘text’]{} |
伪类 | :hover{} |
伪元素 | ::first-line{} |
相邻选择器 子代选择器 | > + |
选择器权重计算规则
样式的最终确定,来源于 重要性(eg:!important) 和 样式声明 的双重判定 ,重要性不同,则应用带有!important的样式声明,重要性相同时,则根据以下的权重来进行判断。
注意:权值的0000写法仅是一种表达方式,与十进制的一千(1000)以及二进制的八(1000)没有任何关系!!!
- 内联样式 ,如:style=" " 权值为1000
- ID选择器,如:#id{} 权值为0100
- 类;伪类;属性选择器,如.class{} 权值为0010
- 类型选择器,伪元素选择器,如div{} 权值为0001
- 通配符、子选择器、相邻选择器等。如* > +,权值为0000
- 继承的样式没有权值
实例:
<div id='b' class="a"></div>
样式一:
.a.a {
width: 40px;
height: 40px;
background: red;
}
.a {
width: 40px;
height: 40px;
background: green;
}
解释:.a.a 是两个类选择器 根据权值0010+0010=0020;而.a是一个类选择器 权值为0010。比较0020与0010 在相同的位置上 2>1,所以应用.a.a的样式。
样式二:
.a.a {
width: 40px;
height: 40px;
background: red;
}
.a {
width: 40px;
height: 40px;
background: green !important;/*此处不同,增加important*/
}
解释:!important提升了样式的重要性,所以即使权值0020>0010 但仍然应用带!important的0010的样式声明。
彩蛋
- 权值是256进制(错误)的由来:以前可以用256个class抵消一个ID 并不是规定的权值进制运算。
- !important在ie6-有些bug。
p{
color:red !important;
color:blue;
} //会显示blue
---------------------------------------------------------------------
p{color:red !important; }
p{color:blue;} // 这样就会显示的是red。说明ie6还是支持important的
参考链接
知乎:前端杂谈: CSS 权重 (Specificity)
简书:也来谈谈CSS层叠
segmentfault:CSS中选择器的权重值
MDN Web Docs:MDN Web Docs
W3C 标准:W3C 标准
个人的学习总结,欢迎大家指正批评。