CSS属性选择器对于布尔属性是否可以更简洁地书写？

Question

我读到了HTML中的"布尔属性"，例如readonly、disabled、required等，可以留空或者具有它们自己的值。人们似乎都在使用这两种风格（请参见如何编写布尔属性？）...

因此，最好的方法是像这样编写您的CSS：

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

(https://dev59.com/tmkw5IYBdhLWcg3wzdtF#19644231)

但是有没有更简洁的方法来编写这个代码呢？或者使用一些 CSS3 属性选择器的魔法？我尝试了input[readonly*=""], 但是没有成功。

- Luke

---

你只需要使用 input[readonly] ... http://jsfiddle.net/FcBuS/ - Josh Crozier

@JoshC...您似乎是正确的！我之前的测试可能出了问题，因为我认为这不起作用。谢谢。 - Luke

Answer 1

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

- Jukka K. Korpela

Answer 2

HTML中的布尔值不需要实际的值。如果存在就是真，不存在就是假。

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

在HTML中：

<input ... readonly>

CSS（层叠样式表）

input[readonly] { ... }

在XHTML中，这很烦人，我想尽可能避免。

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

CSS（层叠样式表）

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

编辑：正如许多人指出的那样，在XHTML CSS中，您可以仅编写readonly，因为匹配属性的存在即使该属性被设置为readonly="readonly"之类的内容也可以工作。

XHTML的CSS是相同的。

input[readonly] { ... }

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

- OdraEncoded

---

即使在XHTML中也没有必要使用较长的形式。 - Jukka K. Korpela

我正在思考一种编写CSS的方法，使其具有可移植性并始终有效（适用于现代浏览器）。在HTML中，只使用“readonly”或同时使用“readonly =“ readonly” ”都是有效的，因此我不想假设其中一种样式比另一种更好。 - Luke

[readonly] 只是一个属性选择器。如果设置了该属性，无论其值如何或该属性是否有效，它都会匹配。你为什么认为它不起作用呢？ - cimmanon

再次测试，这确实有效。http://jsfiddle.net/luken/WBkLV/ 我最初的测试肯定有问题。 - Luke