博客列表 >细说选择器权重与使用场景

细说选择器权重与使用场景

昊森
昊森原创
2023年02月20日 00:25:26319浏览

选择器权重

下面这段代码我们可以看出,我们给h3设置了蓝色和红色,但是它页面内只渲染出了红色。

那是因为css是层叠样式表,逐级向下运行,我们的蓝色被它盖住了。

那我们在源码不变的情况下让他显示蓝色,应该怎么做呢?

这时候选择器权重就起到作用了。

html

  1. <h3>读孙子兵法,品启强人生</h3>

css

  1. h3 {
  2. color: blue;
  3. }
  4. h3 {
  5. color: red;
  6. }
  7. /* 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=0
100+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
我们现在就可以实测

  1. <body>
  2. <h3>读孙子兵法,品启强人生</h3>
  3. </body>
  1. h3 {
  2. color: blue;
  3. }
  4. h3 {
  5. color: red;
  6. }
  7. /* css是层叠样式表,就像刷油漆一层一层,
  8. 所以我们看到的是最后一次设置的颜色
  9. */
  10. /* 我们要突破层叠样式,显示第二个 */
  11. /* 下面3个都是0,0,1 */
  12. /* 我们把中间的让他生效 */
  13. h3 {
  14. color: rgb(170, 63, 145);
  15. }
  16. /* 1.增加数量,一个标签为1,那么两个就等于2了 */
  17. /* 这样就成了0,0,2肯定>0,0,1 */
  18. body h3 {
  19. color: red;
  20. }
  21. h3 {
  22. color: rgb(31, 30, 113);
  23. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议