选择器权重
下面这段代码我们可以看出,我们给h3设置了蓝色和红色,但是它页面内只渲染出了红色。
那是因为css是层叠样式表,逐级向下运行,我们的蓝色被它盖住了。
那我们在源码不变的情况下让他显示蓝色,应该怎么做呢?
这时候选择器权重就起到作用了。
html
<h3>读孙子兵法,品启强人生</h3>
css
h3 {
color: blue;
}
h3 {
color: red;
}
/* css是层叠样式表,就像刷油漆一层一层,所以我们看到的是最后一次设置的颜色 */
选择器权重介绍
首先我们看看什么是权重,我们将鼠标箭头放在h3标签上即可看到
选择器特定性:(0,0,1)
我们可以这样理解:
0,0,1=001 那么这个1是在个位上,
0,1,0=010 那么这就是十位数字,
1,0,0=100 那么这就是百位数字。
那么权重又是怎么计算的呢?
1在个位:001=0100+010+11=001
1在十位:010=0100+110+01=010
1在百位:100=1100+010+0*1=100
那么就可以得出结论:1,0,0>0,1,0>0,0,1
css由原子选择器构成
tag
:标签选择器,相当于“个位”class
:类选择器,相当于“十位”id
:ID选择器,相当于“百位”
那么我们根据原子选择器来判断
0,0,1:id->0,class->0,tag->1
我们现在就可以实测
<body>
<h3>读孙子兵法,品启强人生</h3>
</body>
h3 {
color: blue;
}
h3 {
color: red;
}
/* css是层叠样式表,就像刷油漆一层一层,
所以我们看到的是最后一次设置的颜色
*/
/* 我们要突破层叠样式,显示第二个 */
/* 下面3个都是0,0,1 */
/* 我们把中间的让他生效 */
h3 {
color: rgb(170, 63, 145);
}
/* 1.增加数量,一个标签为1,那么两个就等于2了 */
/* 这样就成了0,0,2肯定>0,0,1 */
body h3 {
color: red;
}
h3 {
color: rgb(31, 30, 113);
}