【前端学习整理】CSS（2）：CSS的选择器

本文链接：https://blog.youkuaiyun.com/qq_43944712/article/details/88253461

本文详细介绍了CSS中的各种选择器，包括标签选择器、class选择器、id选择器，以及子代、后代和相邻兄弟选择器等。通过实例展示了如何使用这些选择器精确地定位和修饰网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器 is what？

标签选择器
class选择器
id选择器
其他选择器
完整的文档

标签选择器

div{width: 200px;height:200px;background: #FF0000;}

div就是上面这段css代码的选择器，意思是选择HTML文档中所有的div元素应用text-align:center属性。
在这里插入图片描述
当然，这只是选择器的一种，一般的页面会有许多html元素，需要用更简化方便的选择器来区分开来他们的不同和相同。
常用的选择器有

class选择器,id选择器,标签选择器

上面这种属于标签选择器，它选择了h1标签。

class选择器

.demo_one{font-size:14px;color:red;}
/* 使用class选择器写法为"."+class名称选中指定元素 */

使用class选择器写法为"."+class名称选中指定元素

<p class="demo_one">class选择器</p>
		<!-- 使用class属性给元素命名，该名可以被class选择器选中。 -->

使用class属性给元素命名，该名可以被class选择器选中
如图：

id选择器

#demo_two{font-size:16px;color: aqua;}
/* 使用id选择器写法为"."+id名称选中指定元素 */

使用id选择器写法为"."+id名称选中指定元素

<p id="demo_two">id选择器</p>
<!-- 使用id属性给元素命名 使用,一个元素也可以有多个class名,而id只能指定唯一一个元素。 -->

使用id属性给元素命名,一个元素也可以有多个class名,而id只能指定唯一一个元素。
如图：

除了以上常见的选择器,还有子代.后代.相邻的选择器等写法

其他选择器

/* 除了常见的选择器,还有子代.后代.相邻的选择器等写法 */
div>p{color: aqua;font-size:14px;}

这种写法为子代选择器,可以读成：div的下一代p标签，所有div元素的下一层p元素都将变成天蓝色
如图：

div li{color: aquamarine;}

这种写法为后代选择器,可以读成:div后所有的li标签,在这个标签下所有的li标签都将变成蓝绿色
如图：

div+h1{color: #00FFFF;}

这种写法为兄弟选择器,可以读成:div同层级的下一个h1标签,在这个标签后的第一个h1标签字体将变成天蓝色
如图：

.demo_three *{color:#fff}

这种写法表示选中.demo_three后的所有元素,也叫通用选择器
如图：

完整的文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>什么是选择器</title>
		<!-- 选择器顾名思义是选择指定HTML元素修改样式，让页面丰富并具有多样性 -->
	</head>
	<style>
		/* 常见的选择器有,class选择器,id选择器,标签选择器 */
		div{width: 200px;height:200px;background: #FF0000;}
		/* 这种直接填写标签名的选择器为标签选择器,所有div标签都将应用这个样式 */
		.demo_one{font-size:14px;color:red;}
		/* 使用class选择器写法为"."+class名称选中指定元素 */
		#demo_two{font-size:16px;color: aqua;}
		/* 使用id选择器写法为"."+id名称选中指定元素 */
		 
		/* 除了常见的选择器,还有子代.后代.相邻的选择器等写法 */
		div>p{color: aqua;font-size:14px;}
		/* 这种写法为子代选择器,可以读成：div的下一代p标签，所有div元素的下一层p元素都将变成天蓝色 */
		div li{color: aquamarine;}
		/* 这种写法为后代选择器,可以读成:div后所有的li标签,在这个标签下所有的li标签都将变成蓝绿色 */
		div+h1{color: #00FFFF;}
		/* 这种写法为兄弟选择器,可以读成:div同层级的下一个h1标签,在这个标签后的第一个h1标签字体将变成天蓝色 */
		.demo_three *{color:#fff}
		/* 这种写法表示选中.demo_three后的所有元素,也叫通用选择器 */
		
	</style>
	<body>
		<div></div>
		<div></div>
		<!-- 所有div标签都将应用标签选择器div的样式 -->
		<p class="demo_one">class选择器</p>
		<!-- 使用class属性给元素命名，该名可以被class选择器选中。 -->
		<p id="demo_two">id选择器</p>
		<!-- 使用id属性给元素命名 使用,一个元素也可以有多个class名,而id只能指定唯一一个元素。 -->
		
		<div>
			我是第一层div元素
			<p>我是第二层，p元素
				<ul>
					<li>
						<p>我是第三层，p元素</p>
					<!-- 这个p元素为上一层p元素的子代，为上上层div元素的后代，所有隔代之后的元素都为后代(这里p标签包含p标签浏览器会解析成两个分开的p标签，具体原因再开一章解释) --></li>
				</ul>
			</p>
			<!-- 这里的p元素为div元素的子代 -->
		</div>
		
		<div>
			<ul>
				<li>div的后代元素</li>
				<li>div的后代元素
					<ul>
						<li>也是div的后代元素</li>
						<li>也是div的后代元素</li>
					</ul>
				</li>
				<li>div的后代元素</li>
				<li>div的后代元素</li>
			</ul>
		</div>
		<!-- 可以看出来，使用后代选择器，div后的所有li元素都应用了该样式 -->
		
		<h1>这个元素为div后的第一个h1元素，div+h1的兄弟选择器将会选中它</h1>
		<!-- 使用兄弟选择器，div后的第一个h1应用了兄弟选择器样式 -->
		
		<div class="demo_three">
			<p>通用选择器测试</p>
			<p>通用选择器测试</p>
			<ul>
				<li>通用选择器测试</li>
				<li>通用选择器测试</li>
				<li>通用选择器测试</li>
				<li>通用选择器测试</li>
			</ul>
		</div>
	</body>
</html>