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

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

#1楼

在现代浏览器中，还可以选择属性而不管其内容如何

与：

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

[anything] {
   /* Styles */
}

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

在相当大比例的浏览器上运行。

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

#2楼

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

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

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

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

#3楼

您可以组合多个选择器，这很酷，您可以根据其值选择每个属性和属性，例如仅基于CSS的值基于href来选择。

通过属性选择器，您可以使用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

您可以在此处查看详细信息。

#4楼

如果您的意思是使用属性选择器，那么为什么不这样做：

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

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

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

#5楼

带有小片段的CSS属性选择器和有效示例

1- [attribute〜=“ value”]

2- [attribute ^ =“ value”]

3- [attribute $ =“ value”]

4- [attribute | =“ value”]

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>

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3161219

标签

firefox

Pen

safari

jquery

Chrome