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

【问题标题】：Can CSS attribute selectors for boolean attributes be written more concisely?布尔属性的 CSS 属性选择器可以写得更简洁吗？
【发布时间】：2013-11-07 19:11:41
【问题描述】：

我读过 HTML“boolean attributes”，例如 readonly、disabled、required（等等）可以为空或者有他们名字的价值。人们似乎同时使用这两种风格（见How should boolean attributes be written?）...

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

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

(https://stackoverflow.com/a/19644231/1766230)

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

【问题讨论】：

你只需要使用input[readonly]...jsfiddle.net/FcBuS
@JoshC ...您似乎是正确的！我一定搞砸了我之前的测试，因为我认为这行不通。谢谢。

标签： html css

【解决方案1】：

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，否则无需编写这两种形式的选择器。使用<input readonly> 和input[readonly] 坚持使用HTML

【讨论】：

即使使用 XHTML，也无需使用较长的表单。
我正在想办法编写 CSS，使其可移植且始终有效（对于现代浏览器）。只有readonly 或readonly="readonly" 都是有效的HTML，所以我不想假设一种风格优于另一种风格。
[readonly] 只是一个属性选择器。如果设置了属性，则无论其值如何或该属性是否有效，它都会匹配。为什么你有理由相信它不起作用？
再次测试，这确实有效。 jsfiddle.net/luken/WBkLV 我的初始测试一定有问题。

【解决方案2】：

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

【讨论】：