按属性选择CSS元素[复数!]

Question

我一直在使用CSS3选择器根据属性选择特定的元素,尽管今天,我已经将自己编程到一个角落,我需要根据两个不同属性的存在选择一个特定的元素,而不是只有1.

例如,我需要选择第一个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属性的元素.

Answer 1

你很亲密,它是:

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

实例

从CSS 2.1规范:

这里,选择器匹配所有SPAN元素,其"hello"属性具有"Cleveland"值,其"goodbye"属性具有"Columbus"值:

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

(还有一个新的CSS3选择器规范,它越来越受支持,但我们不需要CSS3功能.)