selectors-api用于数据属性

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'].