css - 可视化 CSS 选择器，例如 :read-only in debug (F12 tools)

Question

拥有

:read-only, [readonly] {
    background-color: aliceblue;
}

<form>
    <h2>test</h2>
</form>

当调试时，比如说，在 Chrome 中，我如何检测到 h2(或 form)字段有一个 :read-only 属性(或其他类型的选择器，如 :disabled 等)设置为 true?

附言。

为了澄清这个问题:问题不是针对这个具体案例的 CSS 解决方法，而是一种在 devtools(F12 工具)中识别具体元素的方法，如果该元素有或没有一些选择器，:只读 是其中的一个例子......

Answer 1

在 Chrome DevTools 中，这在“元素”选项卡的“样式” Pane 中可见。对于您的特定示例，输出如下所示:

请注意，选择器的匹配部分(:read-only 在这种情况下)是黑色字母，而不匹配的部分([readonly])显示为灰色。

---

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