CSS-类名之间的符号（＞ ~ , + 空格）的用法

码农小白-RMS

已于 2024-05-11 15:32:24 修改

阅读量334

点赞数 12

文章标签： css 前端

于 2024-05-11 15:32:03 首次发布

本文链接：https://blog.csdn.net/LM0916/article/details/138716434

版权

1. >(大于号) 选择某元素后面的第一代子元素（用class类名也是可以的）

<style type="text/css">
	.qq > .ww {
		color: red;
	}
</style>
 
<body>
	<h1 class="qq">
		<strong class="ww">h1下的一代子元素</strong>
	</h1>
	<h1 class="qq">
		<span>
			<strong class="ww">h1下的二代子元素</strong>
		</span>
	</h1>
</body>


----------------------------------------------------------
	<style type="text/css">
		h1 > strong {
			color: red;
		}
	</style>
	 
	<body>
		<h1 class="qq">
			<strong class="ww">h1下的一代子元素</strong>
		</h1>
		<h1 class="qq">
			<span>
				<strong class="ww">h1下的二代子元素</strong>
			</span>
		</h1>
	</body>

效果：

2. ~（波浪号）选取某个元素之后的所有相同元素

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

	<style type="text/css">
		.box~h2{
			background: aqua;
		}
	</style>
	 
	<body>
		<div class="box"></div>
		<h2>1</h2>
		<em>2</em>
		<span><h2>123</h2></span>
		<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>qwer</h1>
	<h2>qwer</h2>
	<h3>qwer</h3>
 
	<h4>qwer</h4>
	<h5>qwer</h5>
	<h6>qwer</h6>
</body>

效果：

5. +（加号）相邻兄弟选择器可选择紧接在另一元素后的元素，且二者需要有相同父元素

<style type="text/css">
	span+em{
		color: red;
	}
</style>
 
<body>
	<h1>
		<span>qwer1</span>
		<em>qwer2</em>
	</h1>
	<span>qwer1</span>
	<div><em>qwer2</em></div>
</body>

效果：