CSS 选择器、伪类与伪元素
CSS 选择器系统的核心分类，以及伪类和伪元素分别解决什么问题。
#concept
#growing
#css
#frontend
[!info] related notes
- 所属 MOC: CSS 层叠与选择器 MOC
- 并列概念: 样式优先级和特异性
- 上位主题: CSS
CSS 选择器、伪类与伪元素
选择器回答的是一个最基础的问题：样式到底作用于谁。
一句话定义
CSS 选择器是一套用来描述“哪些元素应该匹配这条样式规则”的语法系统。
最常见的选择器分类
基础选择器
- 标签选择器：
div - 类选择器：
.card - ID 选择器：
#header - 通配符选择器：
*
组合选择器
- 后代选择器：
.article p - 子元素选择器：
.nav > li - 相邻兄弟选择器：
h2 + p - 通用兄弟选择器：
h2 ~ p
属性选择器
[type="text"][href^="https"][href$=".pdf"]
伪类和伪元素的区别
伪类
伪类描述的是元素的状态或结构位置。
常见例子：
:hover:focus:active:first-child:last-child:nth-child():not()
伪元素
伪元素描述的是元素内容中的一个“虚拟部分”。
常见例子：
::before::after::first-letter::first-line::selection
最容易混淆的点
- 伪类是“元素处于什么状态”
- 伪元素是“元素的哪个虚拟部分”
所以：
a:hover是状态p::before是虚拟内容片段
最小例子
.article p:first-child {
color: #333;
}
.article p::before {
content: "• ";
}p:first-child 要求这个 p 本身是父元素的第一个元素孩子，并不是“父元素下的第一个 p”；后者可用 p:first-of-type。::before 是生成内容的伪元素，不会新增可由 DOM API 获取的普通元素节点。
最短记忆方式
选择器决定“谁被选中”；伪类看状态，伪元素看部分。
Digital Biome