收藏
PHPz批改状态：合格
老师批语：
下面这段代码我们可以看出，我们给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);}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
