(全面：附代码演示)css属性选择器：后代选择器、子选择器、相邻兄弟选择器、通用选择器

最新推荐文章于 2023-04-24 23:22:23 发布

我是X大魔王

最新推荐文章于 2023-04-24 23:22:23 发布

阅读量1.3k

点赞数 1

分类专栏： HTML页面部件🦄 文章标签： css属性选择器后代选择器子选择器相邻兄弟选择器通用选择器

转载必须声明

本文链接：https://blog.youkuaiyun.com/Xmumu_/article/details/121431545

版权

HTML页面部件🦄 专栏收录该内容

17 篇文章

订阅专栏

大家好，这里是X，今天带来CSS选择器中4个比较容易弄混的选择器概念，下面是解释和代码示例🐵说句实话，有时候玩CSS选择器真的很容易混乱，所以特意写下此文，与大家共勉🐳🐳🐳

在这里插入图片描述

方法

在学习这几个选择器的路上，大家光是听名字也可以听出来，这里存在着父类、子类、兄弟的概念，所以在理解上一定要有“先后顺序”的概念，就比如下面的这段代码是我后面即将测试的用例基础码，分析一下它的层次顺序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器问题</title>
	</head>
	<body>

		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<p>p4</p>
		<ol>
			<li>
				<p>p5</p>
			</li>
		</ol>
		<p>p6</p>
		<p>p7</p>
	</body>
</html>

顺序：
在这里插入图片描述

层层分级，以此作为父类、子类、兄弟的概念区分，在这里body是父亲，p是子元素、ul里的p也算是子元素，但是要看具体情况，分析清楚它的父亲是谁，如果对于body来说，p5就像第三代，如果对于ul来说，就像第二代等…那么就让我们开始吧

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器问题</title>
		<style type="text/css">
			/* 后代选择器 */
			/* 父类里所有的p标签都改变 语法：父类标签+空格+标签名 */
			body p{
				background-color: #0000CC;
			}
		</style>
	</head>
	<body>

		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<p>p4</p>
		<ol>
			<li>
				<p>p5</p>
			</li>
		</ol>
		<p>p6</p>
		<p>p7</p>
	</body>
</html>

效果图

在这里插入图片描述

子选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器问题</title>
		<style type="text/css">
			/* 子选择器 */
			/* 是父类的第一任儿子 */
			body>p{
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>

		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<p>p4</p>
		<ol>
			<li>
				<p>p5</p>
			</li>
		</ol>
		<p>p6</p>
		<p>p7</p>
	</body>
</html>

效果图

在这里插入图片描述

相邻兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器问题</title>
		<style type="text/css">
			/* 相邻兄弟选择器 */
			/* 会发现只有class="activate"的那个标签的兄弟背景颜色改变了
			 并且可以发现，只有下一个兄弟改变了，上面的兄弟颜色没有改变---->向下原则，
			 只选一个！
			 */
			.activate + p{
				background-color: #0022FF;
			}
			

		</style>
	</head>
	<body>

		<p>p1</p>
		<p class="activate">p2</p>
		<p>p3</p>
		<p>p4</p>
		<ol>
			<li>
				<p>p5</p>
			</li>
		</ol>
		<p>p6</p>
		<p>p7</p>
	</body>
</html>

效果图

在这里插入图片描述

通用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器问题</title>
		<style type="text/css">
			/* 通用选择器 */
			/* 会激活 class="activate"下面的所有兄弟元素！
				.activate~p就是激活它下面所有的p标签兄弟
			*/
			.activate~p{
				background-color: #003399;
			}
			

		</style>
	</head>
	<body>

		<p>p1</p>
		<p class="activate">p2</p>
		<p>p3</p>
		<p>p4</p>
		<ol>
			<li>
				<p>p5</p>
			</li>
		</ol>
		<p>p6</p>
		<p>p7</p>
	</body>
</html>