Question

具有

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

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

在Chrome中调试时，如何检测h2（或form）字段是否具有:read-only属性（或其他类型的选择器，如{{ 1}}等）设置为:disabled？

PS。

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

Answer 1

在Chrome DevTools中，这在“元素”标签的“样式”窗格中可见。对于您的具体示例，输出如下所示：

styles pane in elements tab - showing :read-only selector

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

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

calling $0.matches in the DevTools console

Answer 2

至少在Chrome中：

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

＆＃13;

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

＆＃13;

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

＆＃13;