复合选择器-并集选择器

最新推荐文章于 2022-12-20 17:27:40 发布

剩下了什么

最新推荐文章于 2022-12-20 17:27:40 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/J8638/article/details/106126378

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

并集选择器（重点）

应用：

- 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
- 并集选择器（CSS选择器分组）是各个选择器通过`,`连接而成的，通常用于集体声明。
- 语法：

- 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

- 记忆技巧：

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*客户需求： p 和 span 和 第一个div 里面的颜色都是红色*/
		/*分开写的*/
		/*p {
			color: red;
		}
		span {
			color: red;
		}*/
		/*.red {
			color: red;
		}*/
		/*并集选择器 用逗号隔开， 逗号理解为 和的意思  通常用于集体声明 就是因为这些选择器 里面的样式 相同*/
		p, 
		span,
		.red {
			color: red;
		}
		
	</style>
</head>
<body>
	<p>我和你</p>
	<p>我和你</p>
	<p>我和你</p>
	<span>我和你</span>
	<span>我和你</span>
	<span>我和你</span>
	<div class="red">我和你</div>
	<div>我和你</div>
	<h1>你和我</h1>
	<h1>你和我</h1>
</body>
</html>