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

Question

我们有几十个CSS pseudo-classes。大多数浏览器的开发者工具只允许我们检查/切换其中的一小部分，例如:hover、:focus、:active。

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

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

我并没有将问题限制在 Chrome DevTools；使用任何浏览器开发工具来回答这个问题都很好。同样，我不会将此问题限制在 Bootstrap 验证的特定用例（这只是想到的第一个），因为该用例仅涵盖了许多其他 CSS 伪类中的两个。

Answer 1

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

在 Chrome 中，您可以使用 开发者工具 检查某些 CSS 伪类的状态，为此让我们以您的 Bootstrap link 为例：

1. 让我们检查表单的一个输入，然后进入 Developer Tools 的 Properties 面板（右侧）。
2. 在此属性面板中，您可以检查这些伪类背后的值：

Pseudo class	Property name	value	Force State exists
:active	N/A	N/A	Yes
:checked	checked	true	No
:default	defaultChecked	true	No
:disabled	disabled	true	No
:empty	childNodes	empty list OR only comment(s)	No
:enabled	disabled	false	No
:focus	N/A	N/A	Yes
:focus-visible	N/A	N/A	Yes
:focus-within	N/A	N/A	Yes
:hover	N/A	N/A	Yes
:indeterminate	indeterminate	true	No
:in-range	validity.rangeOverflow AND validity.rangeUnderflow	false	No
:invalid	validity.valid	false	No
:optional	required	false	No
:out-of-range	validity.rangeOverflow OR validity.rangeUnderflow	true	No
:read-only	readOnly	true	No
:read-write	readOnly	false	No
:required	required	true	No
:valid	validity.valid	true	No
:visited	N/A	N/A	Yes

如何切换它们？

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

但是对于上面列出的大多数属性，您可以编辑值，轻松地按照以下步骤进行操作：

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

PS：当您重新加载或关闭页面/标签时，创建的全局变量将被自动删除。