html - 布尔属性的 CSS 属性选择器可以写得更简洁吗？

Question

我读过 HTML“布尔属性”，例如readonly、disabled、required（等）可以是空白的，也可以是其名称的值。人们似乎在使用这两种样式（请参阅如何编写布尔属性？）...

因此，适应这种情况的最佳方法似乎是编写您的 CSS，例如：

input[readonly], input[readonly="readonly"] {
}

但是有没有更简洁的方法来写这个？也许使用一些 CSS3 属性选择器魔法？我试过input[readonly*=""]了，但没有运气。

score 9 · Accepted Answer

正如@JoshC 在评论中所写，您可以简单地使用input[readonly]. 这个 CSS 选择器（它不知道所有标记序列化问题）匹配input具有属性的元素，readonly无论它的值是什么。每个属性规范必须包含一个值的 XHTML (XML) 要求不影响这一点。

score 5 · Accepted Answer

HTML 中的布尔值不需要实际值。它们存在时为真，不存在时为假。

但是，在 XHTML 中，布尔值需要设置为包含属性集名称的字符串。

在 HTML 中

<input ... readonly>

CSS

input[readonly] { ... }

在 XHTML 中这很烦人，我想不惜一切代价避免

<input ... readonly="readonly" />

~~CSS~~

~~input[readonly="readonly"] { ... }~~

编辑：正如很多人指出的那样，您可以只readonly用 XHTML CSS 编写，因为即使属性设置为readonly="readonly".

XHTML 的 CSS 是相同的

input[readonly] { ... }

除非您在 XHTML 和 HTML 文档中都使用 CSS，否则无需编写这两种形式的选择器。只需坚持使用 HTML<input readonly>和input[readonly]

2 回答 2