检查/切换浏览器开发工具中的 CSS 伪类
Ale*_*mov 11 css browser developer-tools pseudo-class
我们有几十个CSS 伪类。大多数浏览器的开发人员工具只允许我们检查/切换其中的少数几个，例如:hover、:focus、:active。
您如何检查特定元素是否具有其他伪类？你怎么能切换它们？
一个例子是，自举表单验证应用:invalid和:valid伪类到input元件取决于它是否通过了验证。假设我们需要通过检查和切换这些伪类来调试自定义验证规则和反馈。你会如何在开发人员工具中做到这一点？
我的问题不限于 Chrome DevTools；使用任何浏览器开发人员工具回答这个问题都很好。同样，我不将此问题限制在 Bootstrap 验证的特定用例中（这只是我想到的第一个），因为该用例仅涵盖许多其他 CSS 伪类中的两个。
如何检查特定元素是否具有其他伪类？
在 Chrome 中，您可以使用开发人员工具检查某些 CSS 伪类的状态，为此，我们从Bootstrap 链接中获取一个示例：
- 让我们检查表单的输入之一，然后进入“属性”面板（右侧）
上的“开发人员工具” 。
- 在此属性面板中，您可以检查这些伪类背后的值：
| 伪类 | 物业名称 | 价值 | 力状态存在 |
|---|---|---|---|
| ：积极的 | 不适用 | 不适用 | 是的 |
| ：检查过 | 检查过 | 真的 | 不 |
| ：默认 | 默认选中 | 真的 | 不 |
| ：禁用 | 残疾人 | 真的 | 不 |
| ：空的 | 子节点 | 空列表或仅评论 | 不 |
| ：启用 | 残疾人 | 错误的 | 不 |
| ：重点 | 不适用 | 不适用 | 是的 |
| :焦点-可见 | 不适用 | 不适用 | 是的 |
| : 焦点内 | 不适用 | 不适用 | 是的 |
| ：徘徊 | 不适用 | 不适用 | 是的 |
| ：不定 | 不定 | 真的 | 不 |
| ：在范围内 | 有效性.rangeOverflow和有效性.rangeUnderflow | 错误的 | 不 |
| ：无效的 | 有效性.valid | 错误的 | 不 |
| ：选修的 | 必需的 | 错误的 | 不 |
| ：超出范围 | 有效性.rangeOverflow或有效性.rangeUnderflow | 真的 | 不 |
| ：只读 | 只读 | 真的 | 不 |
| :读写 | 只读 | 错误的 | 不 |
| ：必需的 | 必需的 | 真的 | 不 |
| ：有效的 | 有效性.valid | 真的 | 不 |
| ：访问过 | 不适用 | 不适用 | 是的 |
你如何切换它们？
尽管正如我们上面所看到的，我们可以检查一些伪类的值，但其中一部分是只读的，因为浏览器计算输入的有效性，然后将结果放入（名为 的属性对象）中：:valid:invalidValidityStatevalidity
但对于上面列出的大多数属性，您可以编辑值，只需按照以下步骤即可轻松完成此操作：
- 右键单击要编辑属性的元素（在我的例子中，输入与上面相同），然后单击上下文菜单底部的“存储为全局变量”：
- 现在在控制台中您可以看到浏览器为这个新变量指定的名称：
- 最后，我们可以编辑所需的属性来触发（或“删除”）关联的伪类，在我的例子中是
:required：
PS：当您重新加载或关闭页面/选项卡时，创建的全局变量将自动删除。