Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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;}
  这在逻辑上已经简化到了前面伪代码的强度,只是由于兼容性问题,需要加浏览器前缀,所以看上去比传统的方式还繁琐。这也许是因为这个例子中使用的选择器名称太简单了,在选择器复杂的时候就可以看出它的优点了。

  参考:https://developer.mozilla.org/en-US/docs/Web/CSS/:any
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^