CSS中按属性选择元素

Question

是否可以通过 HTML5 数据属性来选择 CSS 中的元素（例如，

data-role

）？

Answer 1

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

[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

    [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 5

您可以组合多个选择器，这太酷了，因为您知道您可以根据属性的值来选择每个属性和属性，例如

href

仅使用 CSS 根据它们的值..

属性选择器允许您使用

id

和

class

属性

进行一些额外的操作

这是关于 属性选择器

的精彩读物

小提琴

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

您可以查看详情这里。

Answer 6

是否可以通过 HTML5 数据属性来选择 CSS 中的元素？只需尝试一下就可以轻松回答这个问题，答案当然是是。但这总是让我们想到下一个问题：“我们应该根据 HTML5 数据属性来选择 CSS 中的元素吗？”对此有不同的意见。 站在“反对”阵营的是（或者至少在 2014 年曾经是）CSS 传奇人物 Harry Roberts。在文章在 OOCSS 中命名 UI 组件

中，他写道：

需要注意的是，尽管我们可以通过其数据设置 HTML 样式-* 属性，我们可能不应该。 data-* 属性的含义是 将数据保存在标记中，

not

用于选择。这来自

HTML 生活水平（重点是我的）： “自定义数据属性旨在存储私有的自定义数据 页面或应用程序，没有更合适的 属性或元素。”

W3C 规范在这一点上含糊不清，令人沮丧，但纯粹基于它做了

和

没有

所说的内容，我认为 Harry 的结论是完全合理的。

从那时起，plenty of

articles 都建议使用自定义数据属性作为样式挂钩是非常合适的，包括 MDN 的指南，使用数据属性。甚至还有一种名为 CUBE CSS 的 CSS 方法，它采用数据属性挂钩作为向组件“exceptions”添加样式的首选方式（在 BEM 中称为 modifiers）。 值得庆幸的是，WHATWG HTML Living Standard 添加了更多单词，甚至一些示例（强调我的）：

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

在本例中，使用自定义数据属性来存储结果 PaymentRequest 的功能检测，可以在 CSS 中使用 以不同的方式设计结帐页面

。

作者应该仔细设计此类扩展，以便当 属性被忽略并且任何关联的CSS

被删除，页面是 还能用。

TL;DR：

是的，在 CSS 选择器中使用

data-*

---

属性是可以的，只要页面在没有它们的情况下仍然可用。

七种不同类型

Answer 7

属性选择器默认区分大小写，写在中括号[]内。

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

可以通过在右括号前添加 i 将属性值字符串更改为不区分大小写：

[attribute="value" i] {
  /* Styles here will apply to elements with:
    attribute="value"
    attribute="VaLuE"
    attribute="VALUE"
    ...etc
  */
}

了解更多信息

访问此链接