🎯
CSS 选择器速查
CSS 选择器速查:后代/子代/兄弟/属性/伪类/伪元素。
本地处理 · 不上传
加载工具中…
相关：css · 选择器 · selector · 速查 · 前端
CSS 选择器速查列出各类选择器的写法与匹配规则，涵盖属性选择器、伪类、组合器与较新的 :is、:has。选对选择器能省掉很多多余的类名。
使用步骤
- 先确定要按标签、类、属性还是层级关系匹配
- 注意后代与子代选择器的空格与大于号差别
- 权重不够时优先调整结构，而不是叠加 !important
- 写完在开发者工具里确认命中的元素数量
使用场景
- 查找合适的选择器写法
- 理解他人样式表的匹配逻辑
- 编写更精准的样式规则
- 调试样式不生效的问题
小贴士
- :has() 让 CSS 第一次能根据子元素选中父元素，这曾是长期以来需要 JavaScript 才能做到的事。
- :is() 会取括号内特异度最高的参数计入权重，而 :where() 的特异度恒为零，后者适合写不增加权重的兜底样式。
- 选择器过于复杂通常意味着结构设计有问题。加一个类名往往比写一串组合选择器更易维护。
常见问题
:has() 能做什么？
根据后代或兄弟元素来选中父元素，比如「选中包含图片的段落」。这在过去只能用 JavaScript 实现，是 CSS 近年最重要的能力扩充之一。
:is() 和 :where() 有什么区别？
匹配行为完全相同，区别只在特异度：:is() 取括号内最高的参数计入权重，:where() 的权重恒为零。写默认样式时用 :where() 能避免它压过后续的覆盖规则。
> 和空格有什么区别？
空格匹配所有后代（任意层级），> 只匹配直接子元素。用 > 更精确也更高效，尤其在嵌套结构中能避免意外命中深层元素。
CSS 选择器速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 选择器速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。