CSS中的any伪类

CSS4中有:matches伪类，用于将多个选择器组合成一个单一的选择器，以便融入其它选择器中。这个伪类并没有在浏览器上实现，要等它实现估计还有很长时间。但是目前一些现代浏览器提供了:any伪类也可以实现同样的效果，遗憾的是IE尚未支持。
　　假如有个这样的HTML文档片段 <div class="a"><div class="b">ab</div></div>
<div class="a"><div class="c">ac</div></div>
<div class="a"><div class="d">ad</div></div>
<div class="b"><div class="a">ba</div></div>
<div class="b"><div class="c">bc</div></div>
<div class="b"><div class="d">bd</div></div>
<div class="c"><div class="a">ca</div></div>
<div class="c"><div class="b">cb</div></div>
<div class="c"><div class="d">cd</div></div>
<div class="d"><div class="a">da</div></div>
<div class="d"><div class="b">db</div></div>
<div class="d"><div class="c">dc</div></div> 　　现在要选择.a或.b标签中的.c或.d标签，并将其文字设置为红色。我们通常会这么写 .a .c,.a .d,.b .c,.b .d {color:red;} 　　选择器中逗号的优先级是非常最低，所以我们需要写出很多完整的后代选择器来匹配。实际上我们需要的是 /*伪代码*/
(.a,.b) (.c,.d) {color:red;} 　　但CSS选择器中并没有这样的小括号用法，这时候:any伪类就可以大展身手了，对上面的情况我们可以这么写 :-webkit-any(.a,.b) :-webkit-any(.c,.d) {color:red;}
:-moz-any(.a,.b) :-moz-any(.c,.d) {color:red;} 　　这在逻辑上已经简化到了前面伪代码的强度，只是由于兼容性问题，需要加浏览器前缀，所以看上去比传统的方式还繁琐。这也许是因为这个例子中使用的选择器名称太简单了，在选择器复杂的时候就可以看出它的优点了。