CSS 选择器符号详解

CSS 中使用了多种符号（组合符、选择器符号）来构建选择器，用于精准定位 HTML 元素。以下是 CSS 中核心的选择器符号及其用法详解，按类别整理：

一、关系选择器（Combinators）

用于描述元素之间的结构关系。

符号 名称 含义 示例
（空格） 后代选择器 选择某元素内部所有后代（任意层级） div p → div 内所有 p（包括嵌套多层）
> 子选择器 选择某元素的直接子元素 ul > li → 只选 ul 的直接 li，不包括 li 里的 li
+ 相邻兄弟选择器 选择紧接在某元素后的同级元素 h1 + p → 紧跟在 h1 后的第一个 p
~ 通用兄弟选择器 选择某元素之后的所有同级元素 h1 ~ p → h1 后所有同级 p
记忆口诀：
空格 = 所有后代，> = 儿子，+ = 下一个亲兄弟，~ = 后面所有亲兄弟。

二、属性选择器符号

用于根据元素的属性或属性值进行选择。

语法 含义 示例
[attr] 存在指定属性 a[href] → 有 href 的 a 标签
[attr=value] 属性值完全等于 value input[type="text"]
[attr~=value] 属性值是空格分隔的词列表，其中包含 value p[class~="note"] → 匹配 class="note warning"
[attr|=value] 属性值等于 value 或以 value- 开头（用于语言） [lang|="zh"] → 匹配 lang="zh" 或 lang="zh-CN"
[attr^=value] 属性值以 value 开头 a[href^="https"] → 所有 HTTPS 链接
[attr$=value] 属性值以 value 结尾 img[src$=".png"] → PNG 图片
[attr*=value] 属性值包含 value 子串 a[href*="example.com"]

三、伪类选择器（以 : 开头）

用于选择元素的特定状态或位置。

常见伪类：

选择器 说明
:hover 鼠标悬停
:focus 元素获得焦点（如 input）
:active 元素被激活（点击时）
:visited 已访问的链接
:first-child 父元素的第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第 n 个子元素（支持公式，如 2n, odd, 3n+1）
:not(selector) 否定伪类，排除匹配的元素
:empty 没有子元素（包括文本）的元素
:checked 被选中的 radio/checkbox
:disabled 禁用的表单元素
示例代码： 
li:not(.special):hover { color: red; }
tr:nth-child(even) { background: #f2f2f2; }

四、伪元素选择器（以 :: 开头）

用于选择元素的特定部分（不是真实 DOM 节点）。

伪元素 说明
::before 在元素内容前插入内容（需配合 content）
::after 在元素内容后插入内容
::first-line 元素的第一行文本
::first-letter 元素的第一个字母（常用于首字下沉）
::selection 用户选中的文本样式
示例代码： 
p::before { content: "» "; color: gray; }
::selection { background: yellow; }
注意：CSS3 推荐伪元素用 ::，伪类用 :，但为兼容旧浏览器，::before 也可写作 :before。

五、其他重要符号

符号 用途
* 通配选择器：匹配所有元素
例：* { margin: 0; }
, 选择器分组：同时为多个选择器应用相同样式
例：h1, h2, h3 { font-weight: bold; }
. 类选择器
例：.btn { ... }
# ID 选择器
例：#header { ... }
: / :: 伪类与伪元素前缀（见上文）

六、优先级（特异性）简要说明

选择器有权重，决定样式覆盖顺序（从高到低）：

  1. !important
  2. 行内样式（style="..."）
  3. ID 选择器（#id） → 权重 100
  4. 类/属性/伪类（.class, [attr], :hover） → 权重 10
  5. 元素/伪元素（div, ::before） → 权重 1
  6. 通配符 *、组合符（>, +, ~）无权重
例：#nav .item:hover 权重 = 100 + 10 + 10 = 120

总结：常用符号速查表

符号 类型 作用
后代 所有后代
> 子元素 直接子代
+ 相邻兄弟 紧跟的下一个兄弟
~ 通用兄弟 后面所有兄弟
. 类 .my-class
# ID #my-id
* 通配 所有元素
, 分组 多选器共用样式
[ ] 属性 按属性筛选
: 伪类 元素状态/位置
:: 伪元素 元素虚拟部分

掌握这些符号，你就能写出精准、高效、可维护的 CSS 选择器！

如需深入某个部分（如 :nth-child() 的公式用法），可以继续提问 😊