可以更简洁地编写布尔属性的CSS属性选择器吗？

Question

我已经读过HTML" 布尔属性 ",例如readonly,disabled,required(等)可以是空白的,也可以是其名称的值.人们似乎都在使用这两种样式(请参阅如何编写布尔属性？)...

因此,似乎最好的方法就是编写你的CSS:

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

(/sf/answers/1375096201/)

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

Answer 1

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

Answer 2

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]