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

Question

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

您如何检查特定元素是否具有其他伪类？你怎么能切换它们？

一个例子是，Bootstrap 表单验证根据元素是否通过验证来应用:invalid和:valid伪类。input假设我们需要通过检查和切换这些伪类来调试自定义验证规则和反馈。您将如何在开发人员工具中做到这一点？

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

标签： cssbrowserpseudo-classdeveloper-tools

Answer 1

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

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

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

伪类	属性名称	价值	强制状态存在
：积极的	不适用	不适用	是的
:检查	检查	真的	不
：默认	默认选中	真的	不
:禁用	禁用	真的	不
：空的	子节点	空列表或仅评论	不
:启用	禁用	错误的	不
：重点	不适用	不适用	是的
：焦点可见	不适用	不适用	是的
:专注于内	不适用	不适用	是的
：徘徊	不适用	不适用	是的
：不定	不定	真的	不
：在范围内	有效性.rangeOverflow和有效性.rangeUnderflow	错误的	不
：无效的	有效性.有效	错误的	不
：可选的	必需的	错误的	不
：超出范围	有效性.rangeOverflow或有效性.rangeUnderflow	真的	不
：只读	只读	真的	不
:读写	只读	错误的	不
：必需的	必需的	真的	不
：有效的	有效性.有效	真的	不
:访问过	不适用	不适用	是的

你怎么能切换它们？

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

但是对于上面列出的大多数属性，您可以编辑该值，轻松执行以下步骤：

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

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