快速业务通道

CSS复合选择器:css3让我们选择元素变得越来越简单

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

选择<a> 标签

可以用一个选择器来定义所有的 <a> 元素, 如下:

.nav li a { }

选择第一个 <a> 元素

为了增加列表左上角的圆角效果, 你需要选择第一个 <a> 元素. 这可以用如下的选择器来实现:

.nav li.first a { }

选择最后一个 <a> 元素

为了增加列表右上角的圆角效果, 你需要选择最后一个 <a> 元素. 这可以用如下的选择器来实现:

.nav li.last a { }

突出显示当前页

通过改变tab的颜色来显示页面是当前页,我们可以在类名中加入current这个类名来实现,如下:

.nav li.current a { }

为当前页面的左右上角添加圆角样式

现在有个问题,第一个和最后一个选项被选中的时候拐角是直角的.为了达到选中时候是当前页的样式,拐角也是圆角效果,我们需要给专门给它们写特殊的选择器,由于现在我们的类名都在同一个元素中,所以我们最终可以用交集复合选择器来实现,如下:

.nav .first.current a { }
.nav .last.current a { }

结果

这看上去很简单,是不是?就像上面提到的,现在的问题是:IE5和IE6都不支持类名交集复合选择器。IE5和IE6在识别类名时候只会识别最后一个类名。效果如下:

.nav .first.current a { }
.nav .last.current a { }

IE5和IE6把这2个选择器解析为:

.nav .current a { }
.nav .current a { }

这意味着这些浏览器会给所有的当前页都增加圆角效果,效果如下:

在IE7下也是没问题的,说明IE7也支持类名交集复合选择器。

解决的办法

可以给第一个和最后一个li单独加一个current的样式,但这样增加了js的负担。

1 2 3 4 5 6 <ul class="nav">;     <li class="first first_current"><a href="">节目</a></li>;     <li class="current"><a href="">合集</a></li>;     <li><a href="">草稿</a></li>;     <li class="last last_current"><a href="">项目</a></li>; </ul>;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号