CSS(三)关系选择器_css 亲子元素

作者：weixin_40725706 | 2024-07-07 15:44:33

踩

css 亲子元素

交集选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*交集选择器:由2个选择器直接构成,选择的元素范围是它们各自的元素的公共部分,即交集*/
			div#second{
				color:blue;
			}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div id="second">我是div2</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

并集选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*并集选择器:由多个选择器通过逗号连接在一起,这些元素可以是任意的基础选择器，并集选择器选择的元素范围是
			  所有选择器选出的元素的并集(合并在一起) */
			div,p{
				color:blue;
			}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<p>我是p元素</p>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

后代选择器


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 后代选择器:选出参考元素的所有后代元素，
			 * 语法：E F，即选出所有E选择器匹配元素的所有后代F元素(包含儿子和孙子)
			  */
			  .txt span{
			  	 color:red;
			  }
		</style>
	</head>

	<body>
		<div class="txt">
			<span>我是第1个span</span>
			<div>
				<span>我是第2个span</span>
			</div>
			<span>我是第3个span</span>
		</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

在这里插入图片描述

亲子选择器


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 亲子选择器:选出参考元素的所有亲子元素，
			 * 语法：E>F，即选出所有E选择器匹配元素的所有直接儿子元素F(不包含孙子元素)
			  */
			  .txt>span{
			  	 color:red;
			  }
		</style>
	</head>

	<body>
		<div class="txt">
			<span>我是第1个span</span>
			<div>
				<span>我是第2个span</span>
			</div>
			<span>我是第3个span</span>
		</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

在这里插入图片描述

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