CSS 选择器是用于“选中”HTML元素并为其应用样式的模式。掌握各种选择器是精准控制页面样式的前提。以下是 CSS 中主要的选择器类型及其详细介绍。
一、基础选择器
1. 元素选择器（Type Selector）
- 语法：
元素名 - 作用：选中指定类型的所有 HTML 元素。
- 示例：
p { color: blue; } /* 所有 <p> 元素 */
div { margin: 10px; } /* 所有 <div> 元素 */2. 类选择器（Class Selector）
- 语法：
.类名 - 作用：选中
class属性包含指定类名的元素。一个元素可有多个类，一个类可被多个元素使用。 - 示例：
.highlight { background: yellow; }
.btn.primary { color: white; } /* 同时有 btn 和 primary 类 */3. ID 选择器（ID Selector）
- 语法：
#ID名 - 作用：选中
id属性等于指定值的唯一元素（id 应全局唯一）。 - 示例：
#header { width: 100%; }
#main-content { padding: 20px; }4. 通配符选择器（Universal Selector）
- 语法：
* - 作用：选中文档中所有元素。
- 用途：常用于重置样式或全局设置。
- 示例：
* { margin: 0; padding: 0; box-sizing: border-box; }二、组合选择器（Combinators）
用于选择与其他元素有特定关系的元素。
1. 后代选择器（Descendant Combinator）
- 语法：
A B - 作用：选中 A 元素内部的所有 B 元素（无论嵌套几层）。
- 示例：
div p { color: green; } /* div 内的所有 p 元素 */2. 子元素选择器（Child Combinator）
- 语法：
A > B - 作用：选中 A 元素的直接子元素 B（不包括孙子及更深层）。
- 示例：
ul > li { margin-left: 20px; } /* 只选 ul 的直接子 li */3. 相邻兄弟选择器（Adjacent Sibling Combinator）
- 语法：
A + B - 作用：选中紧跟在 A 元素后的第一个 B 元素（同级）。
- 示例：
h1 + p { font-size: 18px; } /* 紧跟在 h1 后的第一个 p */4. 通用兄弟选择器（General Sibling Combinator）
- 语法：
A ~ B - 作用：选中 A 元素之后的所有同级 B 元素。
- 示例：
h1 ~ p { color: gray; } /* h1 之后的所有同级 p */三、属性选择器（Attribute Selectors）
根据元素的属性或属性值进行选择。
| 语法 | 作用 | 示例 |
|---|---|---|
[attr] | 有指定属性的元素 | [href] { color: red; } |
[attr=value] | 属性值完全匹配的元素 | [type="text"] { border: 1px solid; } |
[attr~=value] | 属性值包含独立单词（空格分隔） | [class~="btn"] |
[attr|=value] | 属性值以 value 开头，且后跟 - 或结束 | [lang|="en"]（匹配 en, en-US） |
[attr^=value] | 属性值以 value 开头 | [href^="https"]（HTTPS 链接） |
[attr$=value] | 属性值以 value 结尾 | [href$=".pdf"]（PDF 链接） |
[attr*=value] | 属性值包含 value 字符串 | [src*="logo"] |
四、伪类选择器（Pseudo-classes）
用于选择元素的特定状态或位置。
1. 动态伪类
:hover：鼠标悬停:active：元素被激活（点击时）:focus：元素获得焦点（如输入框）:visited：已访问的链接
2. 结构化伪类
:first-child：父元素的第一个子元素:last-child：父元素的最后一个子元素:nth-child(n)：父元素的第 n 个子元素（支持2n,odd,even）:nth-last-child(n)：从后往前数第 n 个:first-of-type：同类型中的第一个:last-of-type：同类型中的最后一个:only-child：唯一的子元素:root：文档根元素（通常是<html>）
3. 其他常用伪类
:not(selector)：不匹配指定选择器的元素
input:not([type="submit"]) { border: 1px solid blue; }:empty：没有子元素（包括文本）的元素:checked：被选中的表单元素（如 radio, checkbox）:disabled/:enabled：禁用/启用的表单元素:target：URL 哈希指向的元素（如#section1）
五、伪元素选择器（Pseudo-elements）
用于选择元素的特定部分（创建虚拟元素）。
| 伪元素 | 作用 |
|---|---|
::before | 在元素内容前插入生成内容 |
::after | 在元素内容后插入生成内容 |
::first-line | 元素的第一行文本 |
::first-letter | 元素的第一个字母（常用于首字下沉） |
::selection | 用户选中的文本部分 |
⚠️ 注意：伪元素使用 双冒号
::（CSS3），但:before和:after也广泛支持。
六、总结
| 类别 | 典型选择器 | 用途 |
|---|---|---|
| 基础 | div, .class, #id, * | 选中基本元素 |
| 组合 | A B, A > B, A + B, A ~ B | 基于关系选中元素 |
| 属性 | [href], [type="text"], [src$=".png"] | 基于属性值选中 |
| 伪类 | :hover, :nth-child(), :not() | 选中状态或位置特定的元素 |
| 伪元素 | ::before, ::after, ::first-letter | 操作元素的特定部分或生成内容 |
最佳实践：
- 优先使用类名，语义清晰且优先级适中。
- 避免过度使用 ID 选择器（优先级过高）。
- 合理利用属性和伪类选择器，减少 HTML 类名污染。
- 掌握
:nth-child()和:not()可解决复杂选择需求。
熟练掌握这些选择器，能让你写出更精确、更高效的 CSS 代码。
THE END
