CSS中关于群组选择器、后代选择器与子代选择器的优先级

最新推荐文章于 2023-07-10 19:58:00 发布

前端_小智

最新推荐文章于 2023-07-10 19:58:00 发布

阅读量1.1k

点赞数 1

分类专栏： HTML 文章标签：选择器优先级 css

本文链接：https://blog.csdn.net/weixin_43445778/article/details/103020076

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

群组选择器、后代选择器与子代选择器的优先级

群组选择器
要对不同的HTML对象定义相同样式时，可以采用群组选择器。例如：
要对p1，p2同时设置相同的颜色。

.p1,.p2{color:#aaa;}

上述规则在选择器中指定了多个对象，对象之间用逗号来分隔。逗号告诉浏览器，规则中包含两个不同的选择器。这样的选择器叫群组选择器。
后代选择器与子代选择器的概念与区别
后代选择器是指只要具备层级关系的元素，被嵌套的都可以成为后代元素。祖先元素包含所有的后代元素。
语法：#div1 span{ color:green;}选择器中间用逗号隔开
子代选择器是指只具备一级层级关系的子元素被嵌套。被父元素包含的子元素。
语法#div1>span{color:green;}父代选择器用>指向子代选择器。
关于三种选择器的优先级
首先我们将群组选择器与后代选择器进行比较。
预设p1,p1,代码如下：


```css
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>优先级</title>
		<style>
			.p1,.p2{
				color: red;
			}
			.main .p1{
				color: pink;
			}
			.main .p2{
				color: pink;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="p1">这是第一个</div>
			<div class="p2">这是第二个</div>
		</div>
	</body>
</html>

群组选择器将字体颜色设置为红色，后代选择器设置为粉色。

运行结果显示字体颜色变成了粉色；
我们将两个不同选择器改变位置再进行对比

<html>
	<head>
		<meta charset="utf-8" />
		<title>优先级</title>
		<style>
			.main .p1{
				color: pink;
			}
			.main .p2{
				color: pink;
			}
			.p1,.p2{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="p1">这是第一个</div>
			<div class="p2">这是第二个</div>
		</div>
	</body>
</html>

在这里插入图片描述
运行结果依旧是粉色。
由此，我们推断，后代选择器的优先级要大于群组选择器。

后代选择器与子代选择器进行比较

<html>
	<head>
		<meta charset="utf-8" />
		<title>优先级</title>
		<style>
			.main .p1{
				color: red;
			}
			.main .p2{
				color:red;
			}
			.main>.p1{
				color:blue
			}
			.main>.p2{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="main">
			<div class="p1">这是第一个</div>
			<div class="p2">这是第二个</div>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述
结果显示字体变为蓝色；
改变代码位置再试一次

<html>
	<head>
		<meta charset="utf-8" />
		<title>优先级</title>
		<style>
			.main .p1{
				color: red;
			}
			.main>.p1{
				color:blue
			}
			.main>.p2{
				color: blue;
			}
			.main .p2{
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="p1">这是第一个</div>
			<div class="p2">这是第二个</div>
		</div>
	</body>
</html>

在这里插入图片描述
结果显示p1为蓝色，p2为红色，由此我们推断，子代选择器与后代选择器的优先级相同，按照代码顺序解析，后面的会覆盖前面的。
所以三种选择器的优先级，群组选择器小于后代选择器，后代选择器与子代选择器优先级大小相同。

前端_小智

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS中关于群组选择器、后代选择器与子代选择器的优先级

群组选择器、后代选择器与子代选择器的优先级群组选择器要对不同的HTML对象定义相同样式时，可以采用群组选择器。例如：要对p1，p2同时设置相同的颜色。.p1,.p2{color:#aaa;}上述规则在选择器中指定了多个对象，对象之间用逗号来分隔。逗号告诉浏览器，规则中包含两个不同的选择器。这样的选择器叫群组选择器。后代选择器与子代选择器的概念与区别后代选择器是指只要具备层级关系的元...
复制链接

扫一扫