3

在 HTML5 中，CSS 选择器似乎可以很好地与 data-* 属性配合使用。例如：

<style>
div[data-foo='bar'] {
  background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>

将正确设置第一个 . 但是，尝试使用 selectors-api 选择此类元素会失败。例子：

var foos = document.querySelectorAll("div[data-foo]='bar'");

或者

var foos = document.querySelectorAll("div data-foo='bar'");

在 Chrome 和 Safari 中，这会产生一个神秘的错误：

SYNTAX_ERR：DOM 异常 12

关于如何使用 selectors-api 根据 data-* 属性正确选择元素有什么想法吗？

4

2 回答 2

8

属性选择器的语法是[att=val]你想要div[data-foo='bar']的。

于 2010-04-19T05:58:28.003 回答
2

安妮是对的。（幸运的是，他是相关规范的编辑之一。）

<!DOCTYPE html>
<style>
div[data-foo='bar'] {
  background:blue;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>
<script>
var foos = document.querySelectorAll("div[data-foo='bar']");
alert(foos[0])
</script>

对我有用的是 Firefox、Opera 和 Chrome。请注意，它div[data-foo='bar']是您在 CSS 中使用的 ，而不是div[data-foo]='bar'您在脚本中使用的 。

于 2010-04-19T18:14:03.527 回答