深入理解 CSS 选择器：从基础到高级

CSS（层叠样式表）是网页设计中不可或缺的一部分，它通过选择器来定位 HTML 文档中的元素，并为这些元素定义样式。掌握 CSS 选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起，逐步深入到高级、复杂的结构和伪类/伪元素选择器，帮助你全面掌握 CSS 选择器的使用。

一、什么是 CSS 选择器？

CSS 选择器是一种模式，用于匹配文档树中的一个或多个元素。通过选择器，你可以精确地控制哪些 HTML 元素应该应用特定的样式规则。

例如：

css 复制代码

p {
  color: red;
}

这里的 p 就是一个选择器，表示选中文档中所有的 <p> 标签并为其设置红色字体颜色。

二、基础选择器

1. 元素选择器

根据标签名选择元素。

css 复制代码

div {
  width: 100%;
}

2. 类选择器

以 . 开头，选择具有指定 class 的所有元素。

html 复制代码

<div class="highlight">高亮文字</div>

css 复制代码

.highlight {
  background-color: yellow;
}

注意：一个元素可以有多个 class，如 class="highlight important"。

3. ID 选择器

以 # 开头，选择具有指定 id 的唯一元素。

html 复制代码

<div id="main-content">主内容区</div>

css 复制代码

#main-content {
  font-size: 18px;
}

⚠️ 注意：id 是唯一的，不要重复使用同一个 id。

4. 通用选择器

使用 * 匹配所有元素，常用于重置默认样式。

css 复制代码

* {
  margin: 0;
  padding: 0;
}

三、组合选择器

1. 群组选择器

用逗号 , 分隔多个选择器，表示"或"的关系。

css 复制代码

h1, h2, h3 {
  color: #333;
}

2. 后代选择器

空格分隔两个选择器，表示选择某元素的后代元素。

css 复制代码

div p {
  line-height: 1.5;
}

上例表示选择 <div> 中的所有 <p> 元素，不管嵌套多深。

3. 子元素选择器

使用 > 表示只选择直接子元素。

css 复制代码

ul > li {
  list-style: square;
}

与 ul li 不同，这个只会匹配 <ul> 下一级的 <li>，不会匹配嵌套 <ul> 中的 <li>。

4. 相邻兄弟选择器

使用 + 选择紧跟在某个元素之后的兄弟元素。

css 复制代码

h2 + p {
  margin-top: 0;
}

只匹配紧接在 <h2> 后面的第一个 <p>。

5. 一般兄弟选择器

使用 ~ 选择后面所有符合条件的兄弟元素。

css 复制代码

input:checked ~ label {
  color: green;
}

四、属性选择器

可以根据元素的属性及其值进行选择。

基础语法：

[attr]：存在该属性；
[attr=value]：属性等于某值；
[attr~=value]：属性值包含一个单词；
[attr|=value]：属性值以某值开头并后跟 -；
[attr^=value]：属性值以某值开头；
[attr$=value]：属性值以某值结尾；
[attr*=value]：属性值包含某字符串；

示例：

css 复制代码

input[type="text"] {
  border: 1px solid #ccc;
}

a[href*="example.com"] {
  color: blue;
}

img[alt~="logo"] {
  border-radius: 50%;
}

五、伪类选择器

伪类用于选择元素的特定状态或位置，以冒号 : 开头。

常见伪类：

伪类	描述
`:link`	未访问链接
`:visited`	已访问链接
`:hover`	鼠标悬停时
`:active`	被激活时（点击）
`:focus`	获取焦点时

css 复制代码

a:hover {
  text-decoration: underline;
}

input:focus {
  border-color: blue;
}

结构性伪类：

伪类	描述
`:first-child`	第一个子元素
`:last-child`	最后一个子元素
`:nth-child(n)`	第 n 个子元素
`:only-child`	唯一子元素
`:empty`	没有子节点的元素

css 复制代码

li:nth-child(odd) {
  background-color: #f9f9f9;
}

p:empty::before {
  content: "这是一个空段落";
}

UI 伪类：

伪类	描述
`:checked`	单选框/复选框被选中
`:enabled` / `:disabled`	控件是否启用
`:required` / `:optional`	是否为必填项

css 复制代码

input:required {
  border: 2px solid red;
}

六、伪元素选择器

伪元素用于对某些"特殊位置"添加样式，通常以双冒号 :: 开头（也可以单冒号兼容旧浏览器）。

常见伪元素：

伪元素	描述
`::before`	在元素内容前插入内容
`::after`	在元素内容后插入内容
`::first-line`	元素第一行文本
`::first-letter`	元素第一个字符
`::selection`	用户选中的部分

css 复制代码

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

a::after {
  content: " 🔗";
}

七、总结

选择器类型	示例	用途
元素选择器	`p`	所有段落
类选择器	`.btn`	所有具有 btn 类的元素
ID 选择器	`#nav`	唯一的导航栏元素
属性选择器	`[type="text"]`	所有文本输入框
伪类	`:hover`	鼠标悬停效果
伪元素	`::before`	插入装饰内容
组合选择器	`div > p`	直接子段落

如果你正在学习 CSS，不妨尝试自己动手写几个小例子，比如实现一个带 hover 效果的按钮、一个响应式菜单或者一个简单的卡片布局。实践是最好的老师！