CSS 选择器速查
CSS 选择器速查表：基础、属性、伪类、伪元素 37 种选择器。
纯浏览器本地运行，数据不上传服务器
| 选择器 | 说明 |
|---|---|
* | 通配符 |
div | 标签 |
.class | 类 |
#id | ID |
a, b | 并列 |
a b | 后代 |
a > b | 直接子代 |
a + b | 相邻兄弟 |
a ~ b | 一般兄弟 |
[attr] | 属性存在 |
[attr=val] | 属性等于 |
[attr^=val] | 属性开头 |
[attr$=val] | 属性结尾 |
[attr*=val] | 属性包含 |
:hover | 悬停 |
:active | 激活 |
:focus | 聚焦 |
:first-child | 首个子元素 |
:last-child | 最后一个子元素 |
:nth-child(n) | 第 n 个 |
:nth-of-type(n) | 同类型第 n 个 |
:not(sel) | 取反 |
:empty | 空元素 |
:checked | 选中（表单） |
:disabled | 禁用 |
:enabled | 可用 |
:visited | 已访问 |
:link | 未访问链接 |
:root | 根元素 |
::before | 前伪元素 |
::after | 后伪元素 |
::first-line | 首行 |
::selection | 选中文本 |
::placeholder | 占位提示 |
:is(a,b) | 匹配任意 |
:where(a,b) | 匹配任意（零权重） |
:has(sel) | 包含选择器 |
使用说明
- 速查 CSS 选择器：基础、属性、伪类、伪元素。
- 搜索支持按选择器或说明过滤。
- 精准定位元素、避免样式覆盖问题常用。
常见问题
选择器优先级怎么算？
id(100) > 类/属性/伪类(10) > 标签/伪元素(1)；!important 最高但慎用。
:has() 有什么用？
父选择器：选择“包含某子元素”的父元素，如 li:has(> a.active)，现代浏览器已支持。