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

Posted 2023-02-16

【中文标题】在 CSS 中指定多个属性选择器

【英文标题】：Specify multiple attribute selectors in 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" />

【参考方案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