在 CSS 中指定多个属性选择器答案

【问题标题】：Specify multiple attribute selectors in CSS在 CSS 中指定多个属性选择器
【发布时间】：2012-09-02 16:09:27
【问题描述】：

执行以下操作的语法是什么：

input[name="Sex" AND value="M"]

基本上，我想选择具有name="Sex" 属性以及value="M" 属性的input 元素：

<input type="radio" name="Sex" value="M" />

以下元素应该不被选中：

<input type="radio" name="Sex" value="F" />

【问题讨论】：

标签： css attributes css-selectors

【解决方案1】：

简单的input[name=Sex][value=M] 会很好。而且在standard doc中其实也有很好的描述：

多个属性选择器可以用来引用多个一个元素的属性，甚至多次到同一个属性。

这里，选择器匹配所有具有“hello”属性的 SPAN 元素恰好具有“克利夫兰”值，其“再见”属性具有正是“哥伦布”的价值：

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

附带说明，仅当属性值不是有效标识符时，才需要在属性值周围使用引号。

JSFiddle Demo

【讨论】：

有没有这样的东西，但是用 OR 代替 AND？
你的意思不是,（逗号）？
你不能写 span[hello="Cleveland"],[goodbye="Columbus"] 但你必须重复一段（可能很长）。
您确实必须（至少目前如此），除非您使用预处理器。详情请咨询this thread。
请注意两个[][]之间不能有空格符号

【解决方案2】：

只是补充一点，选择器和左括号之间不应该有空格。

td[someclass]

会起作用。但是

td [someclass]

不会。

【讨论】：

【解决方案3】：

[class*="test"],[class="second"] {
background: #ffff00;
}

【讨论】：

【解决方案4】：

对于连接它是：

input[name="Sex"][value="M"] {}

对于联合是：

input[name="Sex"], input[value="M"] {}

【讨论】：

【解决方案5】：

连接属性选择器：

input[name="Sex"][value="M"]

【讨论】：

值得注意的是，至少有一个属性值必须被引用。如果您将其写为input[name=Sex][value=M]，这将失败，即使选择器只有一个不使用引号的属性也是有效的。
@stevec 你的意思是把这个放在接受的答案上吗？我在回答中引用了这些值。我也不认为这是真的。如果答案包含某些字符但在此示例中没有，则需要引号。 mothereff.in/unquoted-attributes
我添加了该注释，因为我在几个没有引号的浏览器中尝试过它，但它完全失败了。我认为问题在于，如果没有至少一个引号，它是模棱两可的，因为它可以被解释为名称为 Sex][value=M 的输入
@stevec 括号在不带引号的属性中是无效的，正是出于这个原因。此示例适用于 Firefox 和 Chrome：jsfiddle.net/o2abekdh/3