在CSS中按数据属性select元素
是否可以通过CSS5中的HTML5数据属性（例如data-role ）select元素？
如果你的意思是使用属性select器 ，那么为什么不呢：
[data-role="page"] { /* Styles */ }
有多种属性select器可以用于各种场景，这些场景都在我链接到的文档中。 请注意，尽pipe自定义数据属性是“新的HTML5function”，
-
浏览器通常不会有任何支持非标准属性的问题，所以您应该能够使用属性select器对它们进行过滤; 和
-
您不必担心CSSvalidation，因为CSS不关心非名称空间属性名称，只要它们不会中断select器语法。
在现代浏览器中，也可以select不pipe内容的属性
有：
[data-my-attribute] { /* Styles */ } [anything] { /* Styles */ }
例如： http : //codepen.io/jasonm23/pen/fADnu
在很大比例的浏览器上工作。
注意这也可以用在JQueryselect器中，或者使用document.querySelector
值得注意的是CSS3子string属性select器
[attribute^=value] { /* starts with selector */ /* Styles */ } [attribute$=value] { /* ends with selector */ /* Styles */ } [attribute*=value] { /* contains selector */ /* Styles */ }
你可以结合多个select器，这是非常酷的知道，你可以select每个属性和属性的基础上，像他们的价值像href基础上，它们的价值只与CSS ..
属性select器允许你使用id和class属性来玩一些额外的东西
这是一个很棒的读取属性select器
小提琴
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>
