是否可以通过其 HTML5 数据属性(例如,data-role
)选择 CSS 中的元素?
6 回答
如果您的意思是使用属性选择器,当然,为什么不:
[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
属性
这是关于属性选择器的精彩读物
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
您可以在此处查看详细信息。
[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 */
}
是否可以通过 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 选择器中使用属性,只要页面在没有它们的情况下仍然可用。