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 等方法规范命名，减少选择器复杂度。

相关推荐
江城开朗的豌豆几秒前
JavaScript篇：自定义事件：让你的代码学会'打小报告'
前端·javascript·面试
ai产品老杨41 分钟前
减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
前端·vue.js·算法·ecmascript·音视频
lexiangqicheng1 小时前
JS-- for...in和for...of
开发语言·前端·javascript
粥里有勺糖1 小时前
视野修炼-技术周刊第122期 | 发光图片制作
前端·javascript·github
Carlos_sam2 小时前
OpenLayers：封装Tooltip
前端·javascript
工呈士2 小时前
MobX与响应式编程实践
前端·react.js·面试
嘉小华2 小时前
Android Lifecycle 使用
前端
Sherry0072 小时前
实时数据传输协议：WebSocket vs MQTT
前端·websocket
然我2 小时前
JavaScript的OOP独特之道：从原型继承到class语法
前端·javascript·html
腹黑天蝎座2 小时前
如何更好的实现业务中图片批量上传需求
前端
热门推荐
01基于STM32的智能电池管理系统02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08DeepSeek各版本说明与优缺点分析09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10海康Visionmaster-常见问题排查方法-启动阶段