Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )_子代后代选择器怎么算权重

作者：Gausst松鼠会 | 2024-02-29 05:04:24

踩

子代后代选择器怎么算权重

文章目录

一、权重叠加计算公式
二、代码示例

一、权重叠加计算公式

在使用多个类型的基础选择器进行组合时 , 如交集选择器 / 后代选择器等 , 涉及到将多个基础选择器的权重进行叠加 ;

权重叠加计算公式示例 : 根据下面的基础选择器权重表格 , 进行权重叠加计算 ;

CSS 选择器	选择器优先级 - 权重计算
继承父标签的样式 , `*` 通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类选择器，链接伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
标签的行内样式 `style` 属性	1,0,0,0
样式后添加 `!important`	权重无穷大

1、后代选择器权重计算

div p span 选择器权重计算 :

这 3 个选择器是三个基础选择器标签选择器组合而成的后代选择器 ;

该选择器设置的是 div 标签下的 p 标签下的 span 标签样式 ;

标签选择器的权重为 0,0,0,1 ;

3 个标签选择器的权重叠加为 : 0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3 ;

因此最终的 div p span 选择器的权重为 0,0,0,3 ;

2、后代选择器权重计算二

.nav p span 选择器权重计算 :

该选择器是后代选择器 , 由 1 个类选择器 , 2 个标签选择器组合而成的 ;

该选择器是设置 .nav 类标签下的 p 标签下的 span 标签样式 ;

类选择器的权重为 0,0,1,0 ;

标签选择器的权重为 0,0,0,1 ;

1 个类选择器 + 2 个标签选择器组合后的权重为 : 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2 ;

最终的 .nav p span 选择器权重为 0,0,1,2 ;

3、链接伪类选择器权重计算

a:hover 选择器权重计算 :

该选择器是链接伪类选择器 , 由 1 个链接选择器 , 1 个伪类选择器组合而成的 ;

该选择器是设置鼠标经过标签后的样式 ;

伪类选择器的权重为 0,0,1,0 ;

标签选择器的权重为 0,0,0,1 ;

1 个伪类选择器 + 1 个标签选择器组合后的权重为 : 0,0,1,0 + 0,0,0,1 = 0,0,1,1 ;

最终的 a:hover 标签伪类选择器权重为 0,0,1,1 ;

二、代码示例

1、标签结构

给定 HTML 标签结构 :

	<div class="nav">
		<a href="https://blog.csdn.net/">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>
1
2
3
4
5
6

之后为该标签结构设置各种 CSS 样式 , 进行测试 ;

2、后代选择器选择案例 1

将上面的标签设置成红色 , 设置 .nav 类下的 a 标签选择器的样式即可 , 该选择器的权重为 :

类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 ;

	<style>
		/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */
		.nav a {
			color: red;
		}
	</style>
1
2
3
4
5
6

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组合选择器权重计算</title>
	<style>
		/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */
		.nav a {
			color: red;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="https://blog.csdn.net/">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

展示效果 :
在这里插入图片描述

2、后代选择器选择案例 2

如果要将博客的文本颜色变为蓝色 , 尝试为博客标签添加一个类 blog

<a href="https://blog.csdn.net/" class="blog">博客</a>
1

然后为该类设置样式 , 发现设置无效 ;

		/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */
		.blog {
			color: blue;
		}
1
2
3
4

这是因为上面的类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 权重

高于

类选择器 0,0,1,0 权重 ,

因此 , 后者设置的样式被忽略了 ;

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组合选择器权重计算</title>
	<style>
		/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */
		.nav a {
			color: red;
		}
		
		/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */
		.blog {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="https://blog.csdn.net/" class="blog">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

展示效果 :
在这里插入图片描述

3、后代选择器选择案例 3

如果要将博客的文本颜色变为蓝色 , 尝试为博客标签添加一个类 blog

<a href="https://blog.csdn.net/" class="blog">博客</a>
1

然后为 .nav 类下的 .blog 类元素设置样式 ,

		/* 类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 */
		.nav .blog {
			color: blue;
		}
1
2
3
4

这是因为该选择器的类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 权重

高于

开始的类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1

因此 , 后者设置的样式可以覆盖前者的样式 ;

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组合选择器权重计算</title>
	<style>
		/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */
		.nav a {
			color: red;
		}
		
		/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */
		.blog {
			color: blue;
		}
		
		/* 类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 */
		.nav .blog {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="https://blog.csdn.net/" class="blog">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

展示效果 :

在这里插入图片描述

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