层次选择器

小小潘不放弃

已于 2022-02-24 07:56:43 修改

阅读量82

点赞数

分类专栏： CSS进阶文章标签： css html 关系选择器

于 2022-02-23 16:58:12 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123093733

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的后代选择器、子代选择器、兄弟选择器和相邻选择器的区别和使用场景。后代选择器通过空格分隔选择所有后代元素；子代选择器使用'>'选择直接子元素；兄弟选择器利用'~'选取同级元素；相邻选择器借助'+'选取紧邻的同级元素。通过实例代码展示了各个选择器的工作原理。

摘要由CSDN通过智能技术生成

后代选择器

格式:M N{}，M和N直接用空格隔开。用于选中后代的某一个元素，只要是后代，都可以被选中。此类选择器十分常见。

子代选择器

格式：M>N{}，M和N之间用“>”号隔开。只能选择子代的某一个元素，只能选择一代，子代的子代不能被选中。
以下例子看区别：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>后代选择器和子代选择器</title>
  <style type="text/css">
		/* 后代选择器 */
		#first p{
			color:blue;
		}
		/* 子代选择器 */
		#second>span{
			color:brown;
		}
  </style>
 </head>
 <body>
	<div id="first">
		<p>后代选择器1</p>
		<div><p>后代选择器2</p></div>
	</div>
	<div id="second">
		<span>子代选择器1</span><br>
		<span>子代选择器2</span>
		<div>
			<span>不能选中该元素</span>
		</div>
	</div>
 </body>
</html>

在这里插入图片描述

兄弟选择器

格式：M~N{}，用于选中元素后面的某一类元素，不包括前面。

相邻选择器

格式：M+N{}，用于选中元素后面的某一个相邻的兄弟元素。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>兄弟选择器和相邻选择器</title>
  <style type="text/css">
		/* 兄弟选择器 */
		#first~p{
			color:blue;
		}
		/* 相邻选择器 */
		#second+p{
			color:brown;
		}
  </style>
 </head>
 <body>
	<div id="first">
		<div>以下是兄弟选择器</div>
	</div>
	<p>兄弟选择器1</p>
	<p>兄弟选择器2</p>
	<div id="second">
		<div>以下是相邻选择器</div>
	</div>
	<p>相邻选择器</p>
	<p>未被相邻选择器选中，而是被兄弟选择器选中</p>
 </body>
</html>