当前位置：首页 > news >正文

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

news 来源：原创 2025/6/21 2:06:48

CSS常用选择器

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

核心作用

定位元素
通过元素名称、类名、ID、属性等条件，快速找到需要样式化的目标元素。
应用样式规则
将CSS声明（如颜色、布局等）绑定到匹配的元素上，实现视觉设计。
实现结构控制
通过层级关系（如父子、兄弟元素）精准控制复杂布局。

常见选择器类型与用途

选择器类型	示例	作用
元素选择器	`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`	同时选中多个元素

实际应用场景

统一样式
用类选择器（.button）为多个按钮添加相同样式。
响应交互
用伪类（:hover）实现鼠标悬停效果。
精准定位
用后代选择器（.nav li）控制导航菜单项样式，避免影响其他列表。
动态适配
用属性选择器（[data-active="true"]）标记活动状态的组件。

为什么重要？

减少代码冗余：通过选择器复用样式，避免重复编写。
提升可维护性：修改一处选择器即可全局更新样式。
实现复杂设计：支持层叠、继承等特性，适配多样布局需求。

最佳实践

避免过度依赖!important，优先使用特异性（Specificity）控制样式优先级。
谨慎使用通用选择器（*），防止性能损耗。
利用CSS预处理器（如Sass）的嵌套语法简化复杂选择器。

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

常用选择器介绍：

常用的选择器有：

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

1.ID选择器

作用：通过元素的 id 属性选择唯一元素（如 #header）。
优点：精确，权重高，适合唯一元素样式。
缺点：不可复用，过度使用易导致样式难以维护。
权重：100（最高，仅次于内联样式）。

<!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

<!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。

<!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）。

<!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）。
优点：减少重复代码，统一样式。
缺点：选择器独立计算权重，可能意外覆盖。
权重：按群组中最高权重的选择器计算。

<!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）。

<!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）。

<!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（最低）。

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

9. 伪类选择器

作用：选择元素的特定状态或位置（如 :hover、:nth-child(2)）。
优点：实现动态交互和复杂逻辑选择。
缺点：部分伪类兼容性需注意。
权重：10（与类相同）。

<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（与元素选择器相同）。

  <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 重要的	∞ 无穷大