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

295

做这样的事情的语法是什么：

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

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

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

元件如以下应该没有被选择：

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

css attributes css-selectors

— 约翰
source

436

简单input[name=Sex][value=M]会做的很好。它实际上在标准文档中有很好的描述：

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

在此，选择器匹配所有SPAN元素，这些元素的“ hello”属性的值恰好为“ Cleveland”，而其“再见”属性的值恰好为“ Columbus”：

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

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

JSFiddle演示

— Raina77ow
source

8

是否有这样的东西，但是用OR代替AND？

— törzsmókus

4

您的意思不是,（逗号）？

— raina77ow

2

您无法编写span [hello =“ Cleveland”]，[goodbye =“ Columbus”]，但必须重复（可能很长）部分。

— törzsmókus

确实必须（至少目前如此），除非使用预处理器。有关更多详细信息，请参阅此线程。

— raina77ow

67

串联起来的是：

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

参加工会是：

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

— Yogesh Khater
source

31

连接属性选择器：

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

— 丹尼斯
source

1

值得注意的是，必须至少引用一个属性值。如果您编写它，input[name=Sex][value=M]即使拥有一个仅具有一个不使用引号的属性的选择器是有效的，这将失败。

— 史蒂夫

1

@stevec您是要把这个放在接受的答案上吗？我在答案中引用了这些值。我也不认为这是真的。如果答案包含某些字符，则需要引号，但本示例中不包含引号。mothereff.in/unquoted-attributes

— Dennis

我添加了该注释，因为我在多个没有引号的浏览器中尝试了该注释，但所有注释均失败了。我认为问题在于，至少没有引号，这是模棱两可的，因为它可以解释为名称为的输入Sex][value=M

— stevec

由于确切的原因，@ stevec方括号在未引用的属性中无效。此示例可在Firefox和Chrome中运行：jsfiddle.net/o2abekdh/3

— Dennis，

4

只是要补充一点，选择器和开口支架之间应该没有空间。

td[someclass]

将工作。但

td [someclass]

将不会。

— 让·菲利普·马丁
source

-6

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

— 以利
source