在CSS中按属性选择元素

你可以组合多个选择器，这是很酷的，知道你可以选择每个属性和属性基于他们的值，如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

你可以在这里查看细节。

2016-03-30 04:01:57

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

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

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

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

2015-05-18 15:50:40

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

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

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

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

2011-03-16 11:09:10

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

2020-01-03 10:18:36

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

:

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

[anything] {
   /* Styles */
}

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

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

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

2013-09-12 02:01:46