Question

有没有办法匹配具有未知自定义数据属性的元素？未知我的意思是元素可能如下所示：

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

或

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

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

任何线索？

Answer 1

CSS本身没有这方面的工具。

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

Answer 2

有一类特殊的选择器。它们被称为“attribute selectors” 在previous answer中提出了类似的解决方案，但它需要一个值，而我的 - 不会：）

它应该是这样的：

[data-unknown]{
    color: red;
}

基本上 - 您重复整个属性，无论是data-unknown还是data-anything_you_want。

可以在此处看到它的实例：http://jsfiddle.net/skip405/2vhBj/

Answer 3

你可以这样做：

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

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

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

Answer 4

如果您正在使用HTML5的数据属性，并且您的浏览器支持HTML5 JavaScript的dataset元素属性，则可以动态选择（我使用jQuery缩短示例）：

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

你可以在没有jQuery的情况下完成同样的工作，最初选择所有具有“contains-data”类的页面元素。

此策略确实需要使用JavaScript，因此YMMV。

有关详细信息，请参阅HTML5 Custom Data Attributes (data-*): Using data- attributes with JavaScript。

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

4 个答案: