:
CSS 伪类
CSS 伪类选择器速查（:hover / :nth-child 等）。
本地处理 · 不上传
加载工具中…
相关：CSS伪类 · pseudo-class · :hover · :nth-child · :focus
CSS 伪类列出结构、状态、表单与较新的伪类，如 :nth-child、:focus-visible、:has。伪类让样式能响应状态而无需额外的类名。
使用步骤
- 按状态、结构、表单三类定位伪类
- 注意 :nth-child 的计数是从 1 开始且含所有兄弟元素
- 确认与 :nth-of-type 的区别再选用
- 写完在开发者工具用强制状态功能验证悬停与聚焦
使用场景
- 选择特定状态或位置的元素
- 编写交互状态样式
- 改善表单的可访问性
- 减少不必要的类名
小贴士
- :focus-visible 只在键盘导航时显示焦点环，鼠标点击时不显示。它解决了「去掉难看的焦点框」与「键盘用户需要焦点提示」之间的长期矛盾。
- :nth-child 与 :nth-of-type 的区别在于是否只计算同类型元素，混合结构中两者结果差别很大。
- 绝不要用 `outline: none` 简单粗暴地去掉焦点样式，那会让键盘用户完全无法知道当前焦点在哪。
常见问题
:focus 和 :focus-visible 有什么区别？
:focus 在任何方式获得焦点时都触发（包括鼠标点击），:focus-visible 只在浏览器判断用户需要焦点提示时触发（主要是键盘导航）。用后者能既保持鼠标点击的清爽，又不牺牲键盘可访问性。
nth-child 和 nth-of-type 怎么选？
nth-child 按所有兄弟元素计数，nth-of-type 只按同标签的元素计数。在 div 和 p 混排的容器中，`p:nth-child(2)` 要求第二个子元素恰好是 p，而 `p:nth-of-type(2)` 是第二个 p。
能去掉焦点边框吗？
不应该直接用 outline: none 去掉。键盘用户依靠它判断当前焦点位置，去掉后网站对他们就无法使用了。正确做法是用 :focus-visible 自定义一个好看但清晰可辨的焦点样式。
CSS 伪类是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 伪类，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。