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

Question

我一直在使用 CSS3 选择器根据属性选择特定元素，尽管今天，我将自己编程到一个 Angular 落，我需要根据两个不同属性的存在来选择特定元素，而不仅仅是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"]

Live example

来自CSS 2.1 specification :

Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":

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

(还有一个新的 CSS3 Selectors spec，越来越受支持，但我们不需要为此使用 CSS3 功能。)