在CSS中按属性选择元素

是否有可能通过CSS的HTML5数据属性(例如，data-role)选择元素?

396205 次浏览
小开
最佳答案

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

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

有各种各样的属性选择器可以用于各种场景，我所链接到的文档中都介绍了这些场景。请注意，尽管自定义数据属性是“HTML5的新特性”，

  • 浏览器通常支持非标准属性没有任何问题，所以你应该能够用属性选择器过滤它们;而且

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

小开

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

:

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


[anything] {
/* Styles */
}

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

适用于相当大比例的浏览器。

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

小开

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

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


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


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

你可以组合多个选择器，这是很酷的，知道你可以选择每个属性和属性基于他们的值像href基于他们的值与CSS。

属性选择器允许您使用id和class属性

这里有一个关于Attribute Selectors .的很棒的阅读

小提琴

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>

< p > # EYZ0 < br > IE6+， Chrome, Firefox &Safari < / p >

你可以检查细节here。

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

它是可能的选择CSS元素的HTML5数据属性?只要尝试一下就可以很容易地回答这个问题，答案当然是是的。但这总是会导致我们的下一个问题，“应该我们在CSS中选择元素的HTML5数据属性?”对此有相互矛盾的意见。

在“不”阵营的是CSS传奇人物Harry Roberts(或者至少是2014年的是)。在文章在OOCSS中命名UI组件中，他写道:

值得注意的是，虽然我们可以样式HTML通过它的data-* 属性，我们可能不应该。Data -*属性用于 在标记中保存数据，不用于选择。这，从的HTML 生活水平(我的重点):

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

W3C规范在这一点上含糊得令人沮丧，但纯粹基于做了和没有所说的内容，我认为Harry的结论是完全合理的。

从那时起，很多 的 文章建议使用自定义数据属性作为样式挂钩是非常合适的，包括MDN的指南使用数据属性。甚至还有一种叫做多维数据集的CSS的CSS方法，它采用了数据属性钩子作为向组件“异常”(在本中称为修饰符)添加样式的首选方法。

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

自定义数据属性用于存储自定义数据，状态， 注释和类似的注释是页面或应用程序私有的，用于

在本例中，使用自定义数据属性存储结果 PaymentRequest的特征检测，，可以在CSS中使用 .

.

.
作者应该仔细设计这样的扩展，以便当 属性被忽略，任何相关的CSS被删除，页面为 仍然可用。< / p >

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


提交答案