527

是否可以通过其 HTML5 数据属性(例如,data-role)选择 CSS 中的元素?

4

6 回答 6

827

如果您的意思是使用属性选择器,当然,为什么不:

[data-role="page"] {
    /* Styles */
}

有多种属性选择器可以用于我链接到的文档中的各种场景。请注意,尽管自定义数据属性是“新的 HTML5 功能”,

  • 浏览器通常支持非标准属性没有任何问题,因此您应该能够使用属性选择器过滤它们;和

  • 您也不必担心 CSS 验证,因为 CSS 不关心非命名空间属性名称,只要它们不破坏选择器语法即可。

于 2011-03-16T11:09:10.313 回答
118

在现代浏览器中,也可以选择属性而不考虑其内容

和:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

例如:http ://codepen.io/jasonm23/pen/fADnu

适用于很大比例的浏览器。

请注意,这也可以在 JQuery 选择器中使用,或者使用document.querySelector

于 2013-09-12T02:01:46.937 回答
59

值得注意的是 CSS3 子字符串属性选择器

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}
于 2015-05-18T15:50:40.633 回答
16

您可以组合多个选择器,这很酷,因为您可以根据它们的值选择每个属性和属性,例如href基于它们的值仅使用 CSS..

属性选择器允许你玩一些额外的idclass属性

这是关于属性选择器的精彩读物

小提琴

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}
<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

浏览器支持:
IE6+、Chrome、Firefox & Safari

您可以在此处查看详细信息。

于 2016-03-30T04:01:57.973 回答
10
    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}
于 2020-01-03T10:18:36.883 回答
0

是否可以通过 HTML5 数据属性选择 CSS 中的元素?只需尝试一下就可以很容易地回答这个问题,答案当然是肯定的。但这总是将我们引向下一个问题,“我们应该根据 HTML5 数据属性选择 CSS 中的元素吗?” 对此有不同意见。

在“不”阵营中是(或至少,早在 2014 年)CSS 传奇人物 Harry Roberts。在《在 OOCSS 中命名 UI 组件》一文中,他写道:

需要注意的是,尽管我们可以通过其 data-* 属性设置 HTML 样式,但我们可能不应该这样做。data-* 属性用于在标记中保存数据,而不是用于选择。这来自HTML 生活标准(强调我的):

“自定义数据属性旨在存储页面或应用程序私有的自定义数据,没有更合​​适的属性或元素。”

W3C 规范在这一点上含糊不清,令人沮丧,但纯粹基于它了什么和没说什么,我认为 Harry 的结论是完全合理的。

从那时起,大量文章 建议使用自定义数据属性作为样式挂钩非常合适,包括 MDN 的指南,使用数据属性。甚至还有一种称为CUBE CSS的 CSS 方法,它采用数据属性挂钩作为向组件“异常”(在BEM中称为修饰符)添加样式的首选方式。

值得庆幸的是,WHATWG HTML 生活标准已经添加了更多的词,甚至一些例子(强调我的):

自定义数据属性旨在存储页面或应用程序私有的自定义数据、状态、注释和类似内容,没有更合​​适的属性或元素。

在此示例中,自定义数据属性用于存储 PaymentRequest 的功能检测结果,可用于 CSS 中以不同的方式设置结帐页面的样式

作者应该仔细设计这样的扩展,以便在忽略属性并且删除任何关联的 CSS时,页面仍然可用。


TL;DR:是的,可以data-*在 CSS 选择器中使用属性,只要页面在没有它们的情况下仍然可用。

于 2021-02-02T07:30:51.737 回答