新浪UED

使用css的类名交集复合选择器

by Nikai / 博客,网页重构 / 2011-07-21
使用css的类名交集复合选择器

首先先看一下基本定义:

复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器、“并集”选择器、“后代”选择器。

交集选择器

“交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。

注意其中第一个必须是标记选择器,如p.class1,但有时候会看到.class1.class2,即2个都是类选择器,在其他浏览器中是允许出现这种情况的,但IE6不兼容。如下表:

两个类选择器的“交集”复合选择器浏览器支持表
Mac: Safari 4.0 支持
Mac: Chrome 5.0 支持
Mac: FireFox 3.6 支持
Mac: Opera 10 支持
Win: FireFox 3.6 支持
Win: Opera 10 支持
Win: IE6 不支持
Win: IE7 支持
Win: IE8 支持

复合选择器的使用

这是个简单的tab菜单:

如下是html代码:

<ul class="nav">
    <li class="first"><a href="">节目</a></li>
    <li class="current"><a href="">合集</a></li>
    <li><a href="">草稿</a></li>
    <li class="last"><a href="">项目</a></li>
</ul>

为了实现以上效果,我们在css中可以使用复合选择器。

选择<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的负担。

<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>;
.nav .first_current a { }
.nav .last_current a { }

讨论

有一种方法可以让我们不用在页面中增加像first、last这种多余的类名,那就是使用css3的样式。css3让我们选择元素变得越来越简单,实现头尾效果可用如下效果:

li:first-of-type a { }
li:last-of-type a { }

文章评论

  1. 正深入学习css

  2. 美格印象 说:

    传说中的tab,学习中。。

  3. moe 说:

    看UED博客真心有收获,都是经验啊~书本里学不来的。支持一下。

  4. vimest 说:

    ie6真麻烦。

  5. 匿名 说:

    以前就一直困惑两个类名能不能这样用,学习了~

  6. i404Beta 说:

    传说中的tab,学习中。。

  7. 伯特 说:

    CSS应该做的更多是兼容吧

  8. 分析得很详细,学习啦

  9. viola 说:

    这个可以兼容ie6? 工作中经常遇到这个问题 。ie6 不认类的交级,可以用类和id,虽然不咋科学

  10. avajayam 说:

    CSS应该不会做交集处理,只会并集处理,对于同属性不同值的,就做优先级判断处理,ie6能正确解析.class1.class2,差异只是优先级,测试结果是i6认为.class1.class2的优先级和.class1或.class2同级

  11. 睛采 说:

    不错啊 学习了

  12. An curiosity in using cellular know-how and experience of IT could be beneficial.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>