Question

在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- *属性正确选择元素的想法吗？

Answer 1

属性选择器的语法为[att=val]，因此您需要div[data-foo='bar']。

Answer 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。请注意，正如您在CSS中使用的那样div[data-foo='bar']，而不是div[data-foo]='bar'，就像您在脚本中使用的那样。

selectors-api用于数据属性

2 个答案: