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


当前回答

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

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

这里有一个关于属性选择器的很棒的阅读

小提琴

(href = " http://aamirshahzad.net "] [title =“阿米尔”){ 颜色:绿色; 文字修饰:没有; } * [id = "谷歌"]{ 颜色:红色; } (类* = "堆栈"]{ 颜色:黄色; } <a href="http://aamirshahzad.net" title="阿米尔">阿米尔</a> < br > <a href="http://google.com" id=" Google -link" title="谷歌">谷歌</a> < br > <a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

浏览器支持: IE6+, Chrome, Firefox和Safari

你可以在这里查看细节。

其他回答

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

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

这里有一个关于属性选择器的很棒的阅读

小提琴

(href = " http://aamirshahzad.net "] [title =“阿米尔”){ 颜色:绿色; 文字修饰:没有; } * [id = "谷歌"]{ 颜色:红色; } (类* = "堆栈"]{ 颜色:黄色; } <a href="http://aamirshahzad.net" title="阿米尔">阿米尔</a> < br > <a href="http://google.com" id=" Google -link" title="谷歌">谷歌</a> < br > <a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

浏览器支持: IE6+, Chrome, Firefox和Safari

你可以在这里查看细节。

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

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

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

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

是否有可能通过CSS的HTML5数据属性选择元素?只要尝试一下就能很容易地回答这个问题,答案当然是肯定的。但这总是会让我们想到下一个问题,“我们应该根据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:是的,在CSS选择器中使用data-*属性是可以的,前提是没有它们页面仍然可用。

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

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

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

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

浏览器通常支持非标准属性没有任何问题,所以你应该能够用属性选择器过滤它们;而且 你也不必担心CSS验证,因为CSS不关心非命名空间的属性名,只要它们不破坏选择器语法。