在浏览器开发者工具中检查/切换CSS伪类

Question

我们有几十个CSS伪类。大多数浏览器的开发者工具仅允许我们检查/切换其中一些，如:hover、:focus、:active。

如何检查特定元素是否有其他伪类？如何切换它们？

一个例子是，Bootstrap表单验证将:invalid和:valid伪类应用于元素，取决于它是否通过了验证。假设我们需要通过检查和切换这些伪类来调试自定义验证规则和反馈。你会如何在开发者工具中操作呢？

我不限制此问题只能使用Chrome DevTools回答；使用任何浏览器开发者工具都是可以的。同样，我不限制此问题只适用于Bootstrap验证的特定用例（它只覆盖了许多其他CSS伪类中的两个）。

- Alexander Abakumov

---

不要只考虑使用开发者工具，它们确实存在，但这个链接可能会更好地回答您的问题：https://dev59.com/Gmkw5IYBdhLWcg3wDWPL 。也许您可以使用本地覆盖并通过强制使用它来进行测试。 - Rikin

@patelarpan：但你不能按需切换它们。 - BoltClock

@patelarpan：不确定这个案例的问题在哪里。您通过DevTools手动切换伪类，是通过复选框吗？然后，如果该类别被某些JS或本地验证或页面上的任何内容重置，DevTools将清除该复选框，以便保持同步反映实际元素状态。 - Alexander Abakumov

我知道这个问题发布已经有一段时间了，但是我刚刚在 css-tricks 上找到了一篇文章，或许可以帮助你。 - Millhorn

Answer 1

如何检查特定元素是否具有其他伪类？

在 Chrome 中，您可以使用开发者工具来检查一些 CSS 伪类的状态。为了做到这一点，让我们从您的Bootstrap链接中拿一个例子：

1. 让我们检查表单中的一个输入框，然后进入开发者工具，在右侧的属性面板中。
2. 在这个属性面板中，您可以检查这些伪类背后的值：

伪类	属性名	属性值	是否需要强制状态
:active	N/A	N/A	是
:checked	checked	true	否
:default	defaultChecked	true	否
:disabled	disabled	true	否
:empty	childNodes	空列表 或 仅注释	否
:enabled	disabled	false	否
:focus	N/A	N/A	是
:focus-visible	N/A	N/A	是
:focus-within	N/A	N/A	是
:hover	N/A	N/A	是
:indeterminate	indeterminate	true	否
:in-range	validity.rangeOverflow 和 validity.rangeUnderflow	false	否
:invalid	validity.valid	false	否
:optional	required	false	否
:out-of-range	validity.rangeOverflow 或 validity.rangeUnderflow	true	否
:read-only	readOnly	true	否
:read-write	readOnly	false	否
:required	required	true	否
:valid	validity.valid	true	否
:visited	N/A	N/A	是

如何切换它们？

虽然我们可以查看某些伪类的值，但其中一部分是只读的，例如:valid和:invalid，因为浏览器会计算输入的有效性，然后将结果放入ValidityState（属性对象名为validity）中：

但是，对于上面列出的大多数属性，您可以编辑值。要轻松完成此操作，请遵循以下步骤：

1. 右键单击要编辑属性的元素（在我的情况下与上面相同的输入框），然后在上下文菜单底部点击"存储为全局变量"：
2. 现在在控制台中，您可以看到浏览器为此新变量赋予的名称：
3. 最后，我们可以编辑所需的属性以触发（或“删除”）关联的伪类，在我的情况下是 :required:

附注：创建的全局变量将在重新加载或关闭页面/选项卡时自动删除。

- Ben Souchet

---

你的第一张截图中的伪类在哪里？当我导航到属性面板时，我看不到它们。 - undefined