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

【问题标题】：Matching unknown custom data attributes?匹配未知的自定义数据属性？
【发布时间】：2012-08-16 23:44:00
【问题描述】：

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

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

或

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

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

有什么线索吗？

【问题讨论】：

选择所有具有 data-* 属性的元素的目的是什么？数据属性本身并不相互关联，除了它们都以“data-”开头这一事实。
您找到了可接受的解决方案吗？

标签： html css css-selectors

【解决方案1】：

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

应该是这样的：

[data-unknown]{
    color: red;
}

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

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

【讨论】：

在 starbeamrainbowlabs 的回答中查看我的 cmets，但这次除外，因为您说该值不相关。
另外，IE7+ 支持属性选择器；你不应该需要 Selectivizr 来填充它们。
@BoltClock，是的，你说得对，他们支持，不是[data^=attr]。对此感到抱歉:)我编辑了答案。至于整个 question-thing - 我同意选择所有元素 together 有点奇怪 - 但我的回答比 starbeamrainbowlabs 的回答更接近于设置这些元素的样式。 . 更不用说 Speransky Danil 提供的答案了。因为它回答了Can they be matched **somehow**? 的问题，即使他必须像这样写所有属性 - [data-foo], [data-bar], [data-somethingelse] { styles }

【解决方案2】：

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

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

【讨论】：

我认为有一个工具可以解决它，请参阅下面的答案。
@Speransky Danil，是我否决了这个答案，因为 a）知识渊博（或完全错误），b）看起来更像是评论而不是答案。
可能会更复杂一些 - 例如提到属性选择器不允许使用通配符（例如[data-*]），这就是它不适用于 CSS 的原因。
为什么要包含选择器部分？您的示例将限制选择：div[data-foo] 将仅选择 divs，如果有 td 和 data-foo - 它们将不匹配

【解决方案3】：

你可以这样做：

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

选择器中不能有空格，这一点非常重要。

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

【讨论】：

这需要知道属性名称（和值），但公平地说，我也没有真正看到通过未知属性名称选择元素的意义......
如果不知道属性是什么，那怎么选择呢？
这也是我想知道的。这个问题写得很清楚，但它的前提似乎很荒谬。

【解决方案4】：

如果您使用 HTML5 的 data- 属性，并且您的浏览器支持 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 的情况下完成相同的操作，只需多做一些工作即可最初选择所有具有“包含数据”类的页面元素。

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

【讨论】：