XM的小窝


 

【记录】CSS选择器权重(优先级)

CSS选择器的权重

记录一下以免忘记:kano-heng:

选择器 选择器权重
继承 或 * 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important级别 ∞ 无穷大

css权重是可以叠加的,比如子代/后代选择器
例如:

p {
    color: black;
}
div p {
    color: red;
}
/*这个结果是字体变红*/

因为css权重叠加 div与p标签的权重叠加起来是0,0,0,2 比单独p标签0,0,0,1要高

另一种情况是在继承的情况下,里面任何的高优先级操作都为0,0,0,0

比如:

p {
    color: pink;
}
#ccc {
    color:blue;
}
<div id="ccc"><p>ddd</p></div>
<!--结果是粉色,因为div继承下来的优先级是0-->

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注