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

Question

我一直在使用CSS3选择器根据属性选择特定元素，虽然今天我已经将自己编程到一个角落，我需要根据两个不同属性的存在选择一个特定元素，而不是仅1。

e.g。我需要选择第一个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"]

Live example

来自CSS 2.1 specification：

  

这里，选择器匹配所有SPAN元素，其“hello”属性的值恰好为“Cleveland”，其“goodbye”属性的值恰好为“Columbus”：

     

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

（还有一个新的CSS3 Selectors spec，它越来越受到支持，但我们不需要CSS3功能。）