Question

我正在写一些选择器，但它对我不起作用。

HTML code：

<h2 rel="singer-connector-cricketer">Shoaib Chikate</h2>
<h2 rel="dancer-build-tester">Ashok Dongare</h2>

CSS代码：

h2[rel|="connector"]{
    color:blue;
}

CSS Tricks Attribute

同样的另一个：matches（）选择器也没有工作，虽然我使用的是更高版本的chrome（版本32.0.1700.77）。

HTML code：

<div id="matcher">
        <p>Matched</p>
        <h1>Not</h1>
        <h2>Matched</h2>
        <h3>Not</h3>
</div>

CSS代码：

#matcher :matches(p,h2){
    color:purple;
}

这个选择器如何工作？

CSS tricks Selectors- :matches()

JSFIDDLE

Answer 1

h2[rel|="connector"]查找启动的属性值，其中“connector”后跟连字符。它不会在一组带连字符的单词中查找具有单词“connector”的属性值 - 该值必须以开头。

由于给出的两个元素具有rel属性，其值分别以“singer-”和“dancer-”开头，因此它们都不会匹配。

我还不知道任何支持:matches()的Chrome版本。最新的稳定版本（撰写本文时为34.x）仍然支持:-webkit-any()。

当然，不应该说你不应该在生产代码中使用:-webkit-any()和其余的前缀，因为CSS错误处理规则意味着在当前的前缀状态下使用它实际上会导致你必须为每个前缀编写重复的规则，这完全违背其预期目的。有关示例，请参阅this answer。您可以根据需要测试这些新的选择器，但是在生产中尝试使用它们几乎没有什么好处，而对它们的支持仍然很差。

Answer 2

我会尝试使用#matcher :-moz-any(p,h2)和#matcher :-webkit-any(p,h2)代替:matches，因为目前只有少数浏览器支持:matches。

请参阅：http://jsfiddle.net/CUvZ8/2/

有些选择器对我不起作用

2 个答案: