CSS(三)关系选择器

最新推荐文章于 2022-10-12 20:50:20 发布

司天宏

最新推荐文章于 2022-10-12 20:50:20 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86371340

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

交集选择器


<!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>

在这里插入图片描述

并集选择器


<!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>

在这里插入图片描述

后代选择器


<!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>

在这里插入图片描述

亲子选择器


<!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>

在这里插入图片描述

司天宏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS(三)关系选择器

交集选择器&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /*交集选择器:由2个选择器直接构成,选择的元素范围是它们各自的元素的公共部分,即交集*/ div#s
复制链接

扫一扫

专栏目录