在 CSS 中按属性选择元素

Question

是否可以通过 HTML5 数据属性在 CSS 中选择元素（例如，data-role）？

Answer 1

如果你的意思是使用attribute selector，当然，为什么不呢：

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

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

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

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

Answer 2

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

与：

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

[anything] {
   /* Styles */
}

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

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

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

Answer 3

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

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}

Answer 4

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

属性选择器允许您使用 id 和 class 属性来玩一些额外的东西

Attribute Selectors

上有一篇精彩的文章

Fiddle

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

您可以查看详情here。

Answer 5

    [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 */
}

Answer 6

可能通过 HTML5 数据属性选择 CSS 中的元素吗？只需尝试一下即可轻松回答，答案当然是是。但这总是将我们引向下一个问题，“是否应该通过 HTML5 数据属性选择 CSS 中的元素？”对此意见不一。

在“不”阵营中是（或至少曾经，早在 2014 年）CSS 传奇人物 Harry Roberts。在Naming UI components in OOCSS的文章中，他写道：

重要的是要注意，尽管我们可以通过其数据来设置 HTML 样式-* 属性，我们可能不应该。 data-* 属性用于 在标记中保存数据，不是用于选择。这来自the HTML Living Standard（强调我的）：

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

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

从那时起，plentyofarticles 建议使用自定义数据属性作为样式挂钩非常合适，包括 MDN 的指南 Using data attributes。甚至还有一种名为 CUBE CSS 的 CSS 方法，它采用数据属性挂钩作为向组件“exceptions”（在BEM 中称​​为修饰符）添加样式的首选方式。

谢天谢地，WHATWG HTML Living Standard 此后又添加了一些词甚至一些示例（强调我的）：

Custom data attributes 用于存储自定义数据、状态、 注释，以及类似的，专用于页面或应用程序，用于 没有更合适的属性或元素。

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

作者应仔细设计此类扩展，以便当 属性被忽略并且任何关联的 CSS 被丢弃，页面是 仍然可以使用。

---

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