:read-only, [readonly] {
background-color: aliceblue;
}<form>
<h2>test</h2>
</form>如何檢測，調試時，比方說，在Chrome中，該h2（或form ）字段有:read-only屬性（或其他類型的選擇器，如:disabled等）設置爲true？
PS。
爲了澄清這個問題：這個問題不是關於這個具體案例的CSS解決方法，而是一個識別devtools中的具體元素（F12工具）的方法，如果該元素有或沒有某些選擇器，:read-only是例如等等...
在Chrome的DevTools這是可見的「元素」選項卡上的「樣式」窗格。爲了您的具體示例的輸出是這樣的：
注意（在這種情況下:read-only）匹配選擇的部分是黑色的字母，而部分不匹配（[readonly]）變灰。
更普遍的問題的解決方案，它允許你檢查是否有任何選擇DOM節點相匹配，是使用Element.matches()。簡單地檢查任何DOM節點，並在控制檯中執行$0.matches(':some-selector')（$0引用上次檢查的元素）。這應該適用於所有瀏覽器。
至少在Chrome：
:read-only選擇適用於任何noeditable元素（在你的情況摘錄<h2>和<p>和<html>）[readonly]選擇僅適用於元素與readonly屬性（<p>摘錄）所以，你可以使用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>
謝謝。只有在CSS中明確設置了只讀樣式時，您提供的圖像纔有效......但「匹配」工作非常酷，我不知道，謝謝！可惜沒有顯示在F12 Chrome工具的「計算」標籤中......但正在回答我的問題！ – Serge