通过属性选择一个CSS元素[复数！]

我一直在使用CSS3选择器来根据它们的属性选择特定的元素，虽然今天，我已经将自己编程到了一个角落，在那里我需要选择一个特定的元素基于两个不同属性的存在，而不仅仅是1.通过属性选择一个CSS元素[复数！]

例如我需要选择第一个div。

<div data-foo="bar" data-bar="baz"> 
<div data-foo="bar" data-bar="lorem"> 
<div data-foo="ipsum" data-bar="baz">

只是为了好玩，我试过div[data-foo="bar", data-bar="baz"]，但并不奇怪，这并没有奏效。

有没有什么办法让我得到这个特定的元素？

现在，我能想到的唯一解决方案是选择具有正确data-foo属性的所有元素，然后遍历结果以找到具有正确data-bar属性的元素。

来源

2011-11-30 Julian H. Lam

你被关闭，因此：

div[data-foo="bar"][data-bar="baz"]

Live example

从CSS 2.1 specification：

这里，选择匹配所有SPAN元素，其 “你好” 属性具有完全相同的价值“克利夫兰“，其”再见“属性恰恰具有”哥伦布“的价值：

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

（有一个新的CSS3 Selectors spec为好，这是越来越多的支持，但我们并不需要为这个CSS3功能。）

来源

2011-11-30 17:21:08

哦，哇。感谢您的链接！我不应该仔细阅读这个规范。 **编辑**：嗯，它似乎没有从CSS3规范。这有点烦人，因为其余的功能都有记录... –

@ JulianH.Lam：不用担心，很高兴帮助。它也在CSS3规范中：http://www.w3.org/TR/css3-selectors/#attribute-selectors这是同一个例子，但是段落开头是一个新的句子*说*它们被支持而不仅仅是演示它：*“可以使用多个属性选择器来表示元素的几个属性或同一属性上的多个条件。”* –

Hm。我需要检查我的眼睛... –

通过属性选择一个CSS元素[复数！]

回答

相关问题