CSS 选择器优先级速查
选择器写法、权重与优先级计算
REFERENCE · 14 ROWS
| 选择器 | 权重 | 示例 | 说明 |
|---|---|---|---|
| * | 0,0,0 | * { } | 通配符 |
| 元素 | 0,0,1 | p { } | 标签选择器 |
| 类 | 0,1,0 | .card { } | 最常用 |
| 属性 | 0,1,0 | [disabled] { } | |
| 伪类 | 0,1,0 | :hover { } | |
| ID | 1,0,0 | #app { } | 尽量避免 |
| 行内样式 | 1,0,0,0 | style="…" | 覆盖类 |
| !important | 最高 | color: red !important | 最后手段 |
| 后代 | 相加 | .a .b | |
| 子元素 | 相加 | .a > .b | |
| 相邻兄弟 | 相加 | .a + .b | |
| 通用兄弟 | 相加 | .a ~ .b | |
| :is() | 取最高 | :is(.a, #b) | |
| :where() | 0,0,0 | :where(.a) | 不增加权重 |
HOW TO USE
怎么用CSS 选择器优先级速查
- 打开CSS 选择器优先级速查,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
CSS 选择器优先级速查是什么
选择器写法、权重与优先级计算。CSS 选择器优先级速查按表格整理 14 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「CSS选择器」相关的任务时可以直接用。
- 处理与「优先级」相关的任务时可以直接用。
- 处理与「specificity」相关的任务时可以直接用。
- 处理与「!important」相关的任务时可以直接用。
表格说明
本表共 14 行 4 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。