如何在浏览器开发者工具中查看与切换CSS伪类？

这确实是前端调试里挺常见的困扰——明明CSS里写了不少伪类规则，但浏览器 DevTools 默认只给我们展示 hover、focus 这些常用的，像 :invalid、:valid 这类状态相关的伪类，就得手动找方法去查看和切换。下面我把主流浏览器的操作方法和一些通用技巧整理出来，不管是 Bootstrap 表单验证还是其他场景都能用：

查看并切换伪类状态 #

1. 打开 Elements 面板，选中你要调试的元素（比如表单 input）
2. 在右侧 Styles 面板的右上角，找到「:hov」按钮（Hover 的缩写），点击它会弹出一个伪类控制菜单
3. 菜单里默认只有 :hover、:focus、:active、:visited 这几个选项，点击菜单底部的「+」号，就能手动添加其他伪类——比如输入 :invalid 或 :valid，按回车确认
4. 之后只要勾选你添加的伪类选项，就能强制让元素处于该状态，同时 Styles 面板会自动展示对应伪类的 CSS 规则

额外技巧 #

如果想确认元素当前是否自然触发了某个伪类（比如用户输入不合法后的 :invalid），可以在 Console 面板里执行：

// 替换成你的元素选择器
const input = document.querySelector('#your-input-id');
// 获取该伪类下的计算样式
const invalidStyles = getComputedStyle(input, ':invalid');
// 比如检查是否有 Bootstrap 的红色边框
console.log(invalidStyles.borderColor);

Firefox 对伪类的支持更直观一些：

1. 打开 Inspector 面板，选中目标元素
2. 在右侧 Rules 面板的顶部，找到「Toggle pseudo-classes」按钮（图标是个方块加冒号）
3. 点击后会展开一个完整的伪类列表，直接勾选 :valid、:invalid、:required 等你需要的状态就行，不需要手动添加
4. 勾选后元素会立即进入对应状态，Rules 面板里也会高亮显示该伪类的 CSS 规则

先确保你开启了 Safari 的开发者模式（偏好设置 -> 高级 -> 勾选「显示开发菜单」）：

1. 打开开发菜单里的「显示 Web 检查器」，选中目标元素
2. 在右侧 Styles 面板的顶部，找到「Show Pseudo-classes」按钮（图标是个冒号）
3. 点击后弹出伪类列表，找到 :valid 或 :invalid 勾选即可触发状态，同时查看对应样式

• 对于像 Bootstrap 这类框架，除了伪类，还会用类名（比如 is-invalid）来标记状态，你可以直接在 Elements/Inspector 面板的元素类名里手动添加或移除这些类，快速调试样式
• 如果某些伪类无法通过 DevTools 直接触发（比如 :nth-child(n) 这类结构伪类），可以在 Console 里临时修改 DOM 结构，或者直接在 Styles 面板里临时修改伪类规则来测试效果

内容的提问来源于stack exchange，提问作者Alexander Abakumov