web前端开发：CSS的常用选择器

一只小风华~2025-04-17 14:03

CSS常用选择器

CSS选择器是用于精准定位HTML元素并对其应用样式的核心工具。它的作用类似于"筛选器"，通过特定规则匹配文档中的元素，从而实现样式控制。

核心作用

  1. 定位元素

    通过元素名称、类名、ID、属性等条件，快速找到需要样式化的目标元素。

  2. 应用样式规则

    将CSS声明（如颜色、布局等）绑定到匹配的元素上，实现视觉设计。

  3. 实现结构控制

    通过层级关系（如父子、兄弟元素）精准控制复杂布局。

常见选择器类型与用途

选择器类型 示例 作用
元素选择器 p 选中所有<p>标签
类选择器 .header 选中所有class="header"的元素
ID选择器 #main 选中id="main"的唯一元素
属性选择器 [type="text"] 选中具有特定属性值的元素（如表单输入）
后代选择器 div p 选中<div>内所有嵌套层级的<p>
子选择器 ul > li 仅选中<ul>的直接子元素<li>
伪类选择器 a:hover 匹配元素的特定状态（如悬停、聚焦）
伪元素选择器 p::first-line 选中元素的某部分（如首行、占位内容）
群组选择器 h1, h2 同时选中多个元素

实际应用场景

  1. 统一样式

    用类选择器（.button）为多个按钮添加相同样式。

  2. 响应交互

    用伪类（:hover）实现鼠标悬停效果。

  3. 精准定位

    用后代选择器（.nav li）控制导航菜单项样式，避免影响其他列表。

  4. 动态适配

    用属性选择器（[data-active="true"]）标记活动状态的组件。

为什么重要？

  • 减少代码冗余：通过选择器复用样式，避免重复编写。

  • 提升可维护性：修改一处选择器即可全局更新样式。

  • 实现复杂设计：支持层叠、继承等特性，适配多样布局需求。

最佳实践

  • 避免过度依赖!important，优先使用特异性（Specificity）控制样式优先级。

  • 谨慎使用通用选择器（*），防止性能损耗。

  • 利用CSS预处理器（如Sass）的嵌套语法简化复杂选择器。

通过灵活组合选择器，开发者可以高效、精准地控制网页外观与交互逻辑。

常用选择器介绍：

常用的选择器有：

ID选择器、类选择器、元素选择器、后代选择器、群组选择器、子选择器、兄弟选择、通配符选择器、伪类选择器、伪元素选择器。

1.ID选择器

  • 作用 ：通过元素的 id 属性选择唯一元素 （如 #header）。

  • 优点：精确，权重高，适合唯一元素样式。

  • 缺点：不可复用，过度使用易导致样式难以维护。

  • 权重 ：100（最高，仅次于内联样式）。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			#ps{/* id选择器 */
				color: brown;
			}
		</style>
	</head>
	<body>
		<!-- ID选择器 -->
		<p id="ps">这是ID选择器</p>
	</body>
</html>

2. 类选择器

  • 作用 ：通过 class 属性选择多个元素（如 .button）。

  • 优点：灵活复用，适合组件化开发。

  • 缺点：命名需规范，避免冲突。

  • 权重 ：10

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			.ps1{
				color: blue;
			}
			/* 
            多个类名
            */
            .a{font-size: 20px}
			.b{color: #ff4100}
			.c{background-color: red} 
		</style>
	</head>
	<body>
		<!-- 类选择器 -->
		<p class="ps1">这是class选择器</p>
		<p class="ps1">这是class选择器</p>
		<p class="ps1">这是class选择器</p>
		<p class="ps1">这是class选择器</p>
		<!-- 多个类名 -->
		<div class="a b c"></div>
	</body>
</html>

3. 元素选择器（标签选择器）

  • 作用 ：通过标签名选择元素（如 p、div）。

  • 优点：简单通用，适合全局样式。

  • 缺点：不够精准，可能影响同类标签。

  • 权重 ：1。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			
			p{
				color: yellow;
			}
			div{
				color:pink;
			}
			h1{
				color: orchid;
			}
			li{
				color: #FF0000;
			}
			ul{
				background-color: deepskyblue;
			}
			ol{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<!-- 标签名选择器 -->
		<p>这是标签名选择器</p>
		<div>这是标签名选择器</div>
		<h1>这是标签名选择器</h1>
		<ul>
			<li>这是标签名选择器</li>
		</ul>
        <ol>
            <li>这是标签名选择器</li>
        </ol>
	</body>
</html>

4. 后代选择器

  • 作用 ：选择某元素内的所有后代元素（如 div p）。

  • 优点：层级匹配，适合嵌套结构。

  • 缺点：性能略低，过度嵌套难维护。

  • 权重 ：各选择器权重之和（如 div p 为 1 + 1 = 2）。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			.uls li{
				color: deepskyblue;
			}
			ol li{
				color: gray;
			}
			
		</style>
	</head>
	<body>
		<!-- 后代选择器 -->
		<ul class="uls">
			<li>ul的后代1</li>
			<li>ul的后代1</li>
			<li>ul的后代1</li>
		</ul>
		<ol>
			<li>ol的后代1</li>
			<li>ol的后代1</li>
			<li>ol的后代1</li>
		</ol>
	</body>
</html>

5. 群组选择器

  • 作用 ：同时选择多个选择器（如 h1, h2, .title）。

  • 优点：减少重复代码，统一样式。

  • 缺点：选择器独立计算权重，可能意外覆盖。

  • 权重：按群组中最高权重的选择器计算。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			.dis{
				background-color: blue;
			}
			.test{
				background-color: red;
			}
            /* 有相同属性时用群组最合适 */
			.dis,.test{
				color: #fff;
			}
			
		</style>
	</head>
	<body>
		<!-- 群组选择器 -->
		<div class="dis">群组1</div>
		<p class="test">群组2</p>
	</body>
</html>

6. 子选择器

  • 作用 ：仅选择直接子元素（如 ul > li）。

  • 优点：精准控制层级，避免深层影响。

  • 缺点：结构变化时需调整选择器。

  • 权重 ：各选择器权重之和（如 ul > li 为 1 + 1 = 2）。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			
			.list>li{
				color: red;
				width: 200px;
				height: 400px;
			}
            .uls>li{
                color: #ff4100;
            }
		</style>
	</head>
	<body>
		<!-- 子选择器 -->
		<ul class="list">
			<li>外部li
				<ul class="uls">
					<li>内部li</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

7. 兄弟选择器

  • 相邻兄弟（+） ：选择紧接的同级元素（如 h2 + p）。

  • 通用兄弟（~） ：选择后续所有同级元素（如 h2 ~ p）。

  • 优点：基于位置定位元素。

  • 缺点：使用场景有限。

  • 权重 ：各选择器权重之和（如 h2 + p 为 1 + 1 = 2）。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选择器</title>
		<style type="text/css">
			.dis1+.test{
				color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 兄弟选择器 -->
		<div class="dis1">兄弟1</div>
		<p class="test1">兄弟2</p>
	</body>
</html>

8. 通配符选择器

  • 作用 ：匹配所有元素（*）。

  • 优点：快速重置默认样式。

  • 缺点：性能较差，易引发全局影响。

  • 权重 ：0（最低）。

html 复制代码 
* {
      color: #000;
      margin: 0;
      padding: 0;
      text-decoration: none;
      font-size: 16px;
      font-weight: normal;
      list-style: none;
    }

9. 伪类选择器

  • 作用 ：选择元素的特定状态或位置（如 :hover、:nth-child(2)）。

  • 优点：实现动态交互和复杂逻辑选择。

  • 缺点：部分伪类兼容性需注意。

  • 权重 ：10（与类相同）。

html 复制代码 
<style>
 			.content {
 				background-color: #666;
 			}

 			.content>h1:nth-child(1) {
 				color: aquamarine;
 			}

 			.content>p:nth-child(2) {
 				color: aquamarine;
 			}

 			.content>p:nth-of-type(1) {
 				color: aquamarine;
 			}

 			.content span:nth-child(6) {
 				color: blue;
 			}

 			.content span:nth-of-type(1) {
 				color: rgb(0, 255, 140);
 			}

 			.baidu:link {
 				color: red;
 			}

 			.baidu:hover {
 				color: gray;
 			}

 			.baidu:active {
 				color: green;
 			}

 			.baidu:visited {
 				color: yellow;
 			}

 			h1:hover {
 				color: goldenrod;
 			}

 			.content h1 {
 				position: relative;
 			}

 			
 		</style>

10. 伪元素选择器

  • 作用 ：创建虚拟元素并添加样式（如 ::before、::first-line）。

  • 优点：无冗余 HTML 实现装饰效果。

  • 缺点：生成内容不可选中，需谨慎使用。

  • 权重 ：1（与元素选择器相同）。

html 复制代码 
  <style>         
     .content h1::before {
            content: "aaaaaa";
 			}

 	 .content h1::after {
 			content: "陵";
 			font-size: 14px;
 			color: red;
 			position: absolute;
 			top: 4px;
 			left: 26%;
            }
  </style>

CSS选择器权重（重点）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

1> 选择器相同，则执行层叠性

2> 选择器不同，就会出现优先级的问题。

权重计算公式

标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大

权重计算规则

  • 内联样式 ：1000 > ID ：100 > 类/伪类/属性 ：10 > 元素/伪元素 ：1 > 通配符 ：0。

  • 组合选择器 ：权重累加（如 .nav li.active 权重为 10 + 1 + 10 = 21）。

总结

  • 优先使用类选择器：灵活且权重适中，适合组件化开发。

  • 谨慎使用 ID 选择器：高权重易导致样式难以覆盖。

  • 避免过度嵌套：后代选择器易增加维护成本和性能负担。

  • 合理使用伪类/伪元素：增强交互性，但注意兼容性。

通过组合选择器并管理权重，可编写出高效、易维护的 CSS 代码。推荐结合 BEM 等方法规范命名，减少选择器复杂度。

相关推荐
AI大模型-小华35 分钟前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子3 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅3 小时前
架构没变、规模没变，DeepSeek V4 Flash 正式版凭什么暴涨 47 分？
前端·aigc·deepseek
jarvisuni3 小时前
DeepSeekFlash前端依旧拉垮，而且变慢了很多！
前端·javascript·算法
卷福同学5 小时前
AI编程出海第二步：验证关键词能否做站
前端·人工智能·后端
开普勒chr5 小时前
css样式diaplay:"contents"的妙用
css
赵庆明老师5 小时前
Vben精讲：21-详解web-antd：tsconfig.json
前端·json·vim
wc885 小时前
微软EDGE浏览器功能学习
前端·学习·edge
Csvn6 小时前
🎯 原生 `<dialog>` 元素：终于可以扔掉一半的自定义弹窗组件了？
前端
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费092026 年 AI 大模型 & AI 编程工具实战全总结10AI科技热点日报 | 2026年07月01日