css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解 - 知乎对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。 1、>(大于号) 子元素选择器 >大于号的意思是 选择某元素后面的第一代子元素 案例<style type="text/css"> h1&…https://zhuanlan.zhihu.com/p/180011240

对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。

1、>(大于号) 子元素选择器

>大于号的意思是 选择某元素后面的第一代子元素

案例

<style type="text/css">
	h1>strong {
		color: red;
	}
</style>

<body>
	<h1>
		<strong>一代子元素</strong>
	</h1>
	<h1>
		<span>
			<strong>二代子元素</strong>
		</span>
	</h1>
</body>

2、~（波浪号）

~波浪号的意思是 选取 某个元素之后的所有相同元素

.box~h2 这句就是 选取 .box 后面所有的 h2

这个选择器 两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。

<style type="text/css">
	.box~h2{
		background: aqua;
	}
</style>

<body>
	<div class="box"></div>
	<h2>1</h2>
	<em>2</em>
	<h2>3</h2>
	<h2>4</h2>
</body>

3、（空格） 派生选择器

选择某元素后面的所有子元素

派生选择器允许你根据文档的上下文关系来确定某个标签的样式

这里还是用第一个例子

<style type="text/css">
	h1 strong {
		color: red;
	}
</style>

<body>
	<h1>
		<strong>一代子元素</strong>
	</h1>
	<h1>
		<span>
			<strong>二代子元素</strong>
		</span>
	</h1>
</body>

4、,（逗号）群组选择器

可以对选择器进行分组，被分组的选择器就可以分享相同的声明

<style type="text/css">
	h1,h2,h3{
		color: blue;
	}
	h4,h5,h6{
		color: red;
	}
</style>

<body>
	<h1>案例1</h1>
	<h2>案例1</h2>
	<h3>案例1</h3>

	<h4>案例2</h4>
	<h5>案例2</h5>
	<h6>案例2</h6>
</body>

5、+（加号）相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素

<style type="text/css">
	span+em{
		color: red;
	}
</style>

<body>
	<h1>
		<span>案例1</span>
		<em>案例2</em>
	</h1>
</body>

# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟