细说选择器权重与使用场景-在线源码网

选择器 权重

下面这段代码我们可以看出，我们给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=0*100+0*10+1*1=001
1在十位：010=0*100+1*10+0*1=010
1在百位：100=1*100+0*10+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);
}

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：在线源码网
2、本站永久网址：https://zaixym.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END