在调试中可视化 CSS 选择器，如 :read-only（F12 工具）

Question

有

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

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

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

PS.

澄清问题：问题不是关于这个具体案例的 CSS 解决方法，而是一种在 devtools（F12 工具）中识别具体元素的方法，如果该元素有或没有一些选择器，:read-only 是其中的一个例子...

Answer 1

至少在 Chrome:

因此您可以使用 readonly 属性和 [readonly] 选择器

form :read-only {
    background-color: aliceblue;
}
form [readonly] {
    border: 1px dashed #d00;
}

<form>
  <h2>test</h2>
  <input type="text" />
  <p readonly="readonly">test2</p>
</form>

Answer 2

在 Chrome DevTools 中，这在 "Elements" 选项卡的 "Styles" 窗格中可见。对于您的具体示例，输出如下所示：

请注意，选择器的匹配部分（在本例中为 :read-only）为黑色字母，而不匹配的部分（[readonly]）为灰色。

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

Visualise CSS selectors like :read-only in debug (F12 tools)