html - 匹配未知的自定义数据属性？

Question

有没有办法匹配具有未知自定义数据属性的元素？未知我的意思是一个元素可能看起来像这样：

<div data-unknown="foo"></div>

或者

<td data-someOtherCustomDataAttribute="bar"></td>

我想匹配所有具有 data-* 属性的元素。也就是说，div和td标签都应该匹配。我知道如何匹配值，但不知道属性本身。

有什么线索吗？

Answer 1

有一类特殊的选择器。它们被称为“属性选择器”在上一个答案中提出了类似的解决方案，但它需要一个值，而我的 - 不需要:)

它应该是这样的：

[data-unknown]{
    color: red;
}

基本上 - 你重复整个属性，无论是它data-unknown还是data-anything_you_want.

它的一个活生生的例子可以在这里看到：http: //jsfiddle.net/skip405/2vhBj/

Answer 2

CSS 本身没有用于此目的的工具。

只有一种方法可以通过属性的存在来选择元素：selector[attribute]. 并且无法定义属性外观的某种模式（例如 regexp 或类似的东西），因此您只能设置属性名称。

Answer 3

你可以这样做：

div[attribute=value]
{
    /*css here...*/
}

选择器中没有空格非常重要。

尚未测试它是否适用于未知属性。应该这样做，因为 css 也可以设置 XML 样式。

Answer 4

如果您使用 HTML5 的 data- 属性，并且您的浏览器支持 HTML5 JavaScript 的datasetelement 属性，则可以动态选择（我使用 jQuery 来缩短示例）：

$('.contains-data').each( function() {
    $(this).dataset().each( function (key, value) {
        if (value != '') { // put your "selector" criteria here
             alert(key + ': ' + value);
        }
    }
});

您可以在不使用 jQuery 的情况下完成相同的操作，只需多做一些工作即可最初选择所有具有“包含数据”类的页面元素。

这个策略确实需要使用 JavaScript，所以 YMMV。

有关详细信息，请参阅HTML5 自定义数据属性 (data-*)：将数据属性与 JavaScript 一起使用。