CSS的样式层叠规则与权重计算方法_有两个class如何设置权重

作者：小丑西瓜9 | 2024-02-20 02:16:11

踩

有两个class如何设置权重

CSS的样式层叠规则

在CSS的样式表中，如果同一个容器、标签或元素有多个样式表，在层叠权重相同的情况下，靠下的样式会覆盖靠上的样式，当权重不同的时候，浏览器就会显示权重较大的一个的样式。

权重计算方法

可以进行计算权重的元素包括：
继承或者通配符(*)<元素选择器<类选择器，伪类选择器<ID选择器<行内样式style=""<!important 重要的
选择器权重如下：
在这里插入图片描述
计算方法：权重叠加过程中不存在进位原则，即不论多少个0001相加都不会变成0010或其他的权重。

h1 {
	color: red; /*因为h1是元素选择器，所以权重为0001*/
}

h1 h2 {  /*（h1 h2指的是在h1标签下面的h2标签）*/
	color: blue; /*因为h1和h2都是元素选择器，所以权重为0001+0001=0002*/
}

h1,h2 { /*（h1,h2指的是h1和h2标签，与是否具有包含关系无关）*/
	color: black; 
	/*因为h1和h2都是元素选择器，但是他们之间的逗号（,）相当于将他们分成两个内容一样的样式表，即h1{color: black; }和h2{color: black; }所以这里的两个样式表的权重都是0001*/
}

h1.green { /*（h1.green指的是具有类名为green的h1标签）*/
	color: green; /*因为指的是具有类名为green的h1标签，所以权重是由h1标签和.green属性一起组成，即 0001+0010=0011*/
}

h1#orange { /*（h1#orange指的是具有id属性且属性值为orange的h1标签）*/
	color: orange; /*h1是元素选择器，#orange是ID选择器，与上面h1.green处理相似，所以权重是 0001+0100=0101*/
}

a:link {
	color: yellow;/*a是元素选择器，:link是伪类选择器，与上面h1.green处理相似，所以权重是 0001+0010=0011*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在以上列出的样式中，将同一个元素的多个样式拿出来进行比较，权重相同的时候取写在下面的样式，权重不同的时候取权重大的样式。
即：
属于h1元素的样式有：1、3、4、5，因为这四个样式的权重不一样
所以：
当h1元素中不包含class和id的时候样式为：3的样式，因为3靠近下方。
当h1元素中包含class但不包含id的时候样式为：4的样式。
当h1元素中不包含class但包含id的时候样式为：5的样式。
当h1元素中包含class又包含id的时候样式为：5的样式，因为样式5的权重大于样式4的权重。

属于h2元素的样式有：2、3，因为2和3的权重不相同，所以取权重大的样式，即取权重为0002的样式2，所以所有的不包含class和id属性的h2元素的样式为color: blue;

当h1元素存在一个class属性并且属性值为green时，因为h1.green的权重大于h1标签的权重，所以h1.green的样式会覆盖前面h1标签的样式，即color: green; 会覆盖color: black; 故具有class为green的h1标签的样式为color: green;
同理，当一个h1标签存在一个id属性，并且属性值为orange的时候，因为h1#orange的权重值大于h1标签，大于h1.green，所以会覆盖h1以及h1.green的样式，故具有id为orange的h1标签的样式为color: orange;

当一个a标签有一个link伪类的时候，即a:link 时，链接未被点击前具有样式color: yellow;

权重测试代码（着重于测试p.hello的权重值大小，由下可知权重为0011）：

//css代码：
<style>
        p { /*0001*/
            color: hotpink;
        }

        .hello { /* 0010 */
            color: red;
        }

        p.hello { /* 0011 */
            color: green;
        }


        /* h1 .hello {  /* 0011 */
            color: blue;
        }  */


        div h1 .hello { /* 0012 */
            color: yellow;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// html代码：
<body>
    <div class="happy">
        <h1 class="nihao">
            <p class="hello">你好</p>
            <p>世界</p>
        </h1>
    </div>
</body>
1
2
3
4
5
6
7
8
9

或者将css代码替换为如下代码：（测试过程只需要将他们两个的位置调换即可测出p.hello权重大小为0011 ）

		p.hello {
            color: green;
        }
        
        h1 .hello { /* 0011 */
            color: blue;
        } 
1
2
3
4
5
6
7

更多权重练习：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/117916