Question

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

Answer 1

如果您的意思是使用attribute selector，请确保，为什么不：

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

您可以将各种属性选择器用于各种场景，这些场景都包含在我链接到的文档中。请注意，尽管自定义数据属性是“新的HTML5功能”，

浏览器通常在支持非标准属性方面没有任何问题，因此您应该能够使用属性选择器对其进行过滤;以及
您也不必担心CSS验证，因为CSS不关心非命名空间的属性名称，只要它们不破坏选择器语法。

Answer 2

在现代浏览器中，也可以选择属性，无论其内容如何

with：

[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

＆＃13;

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

＆＃13;

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

＆＃13;

浏览器支持：
IE6 +，Chrome，Firefox＆amp; 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

带有小摘要和有效示例的CSS属性选择器

1 -[attribute〜=“ value”]

2 -[attribute ^ =“ value”]

3 -[attribute $ =“ value”]

4 -[属性| =“值”]

5 -[attribute * =“ value”]

/* Seven (because it search in all words)*/
div[class="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

〜用于选择属性值包含指定单词的元素

/* Five Six Seven (because it search in all words)*/
div[class~="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

^用于选择属性值以指定值开头的元素。

/* One Three Five Seven (because it search in beginning)*/
div[class^="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

$选择器用于选择属性值以指定值结尾的元素。

/* Two Four Six Seven (Because it search from end) */
div[class$="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

|用于选择具有指定属性（从指定值开始）的元素。

/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */
div[class|="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

*用于选择属性值包含指定值的元素。

/* One Two Three Four Five Six (because it search all group)*/ 
div[class*="group"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

Answer 7

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

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

<块引用>

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

<块引用>

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

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

从那时起，plenty of articles 建议使用自定义数据属性作为样式挂钩非常合适，包括 MDN 的指南 Using data attributes。甚至还有一种名为 CUBE CSS 的 CSS 方法，它采用数据属性挂钩作为向组件“exceptions”（在 {{3} }).

值得庆幸的是，BEM 此后又添加了一些单词，甚至还添加了一些示例（重点是我的）：

<块引用>

WHATWG HTML Living Standard 用于存储自定义数据、状态、页面或应用程序专用的注释和类似内容，用于没有更合适的属性或元素。

<块引用>

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

<块引用>

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

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

在CSS中按数据属性选择元素

7 个答案: