可视化CSS选择器,如：调试中的只读(F12工具)

2023年2月22日 422次阅读

有

:read-only, [readonly] {
    background-color: aliceblue;
}
<form>
    <h2>test</h2>
</form>

在Chrome中调试时,如何检测h2(或表单)字段是否具有：read-only属性(或其他类型的选择器,如：disabled等)设置为true？

PS.

澄清问题：问题不是关于这个具体案例的CSS解决方法,而是一种识别devtools(F12工具)中具体元素的方法,如果该元素有或没有一些选择器,：只读是一个例子其中……

最佳答案 在Chrome DevTools中,这在“元素”选项卡的“样式”窗格中可见.对于您的具体示例,输出如下所示：

请注意,选择器的匹配部分(在这种情况下为只读)是黑色字母,而不匹配的部分([readonly])是灰色的.

更常见的问题解决方案,允许您检查任何选择器是否匹配任何DOM节点,是使用Element.matches().只需检查任何DOM节点并在控制台中执行$0.matches(‘：some-selector’)($0指的是最后检查的元素).这适用于所有浏览器.

点赞