来看看：CSS复合挑选器:css3让我们挑选元素变得愈来愈复杂

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
网页制造Webjx文章简介：利用css的类名交集复合选择器.

登录/注册后可看大图

起首先看一下基础界说：

复合选择器就是两个或多个基础选择器，经由过程分歧体例毗连而成的选择器，次要包含“交集”选择器、“并集”选择器、“儿女”选择器。

交集选择器

“交集”复合选择器是由两个选择器间接毗连组成，其了局是选中两者各自元素局限的交集。个中第一个必需是标志选择器，第二个必需是种别选择器大概ID选择器。这两个选择器之间不克不及有空格，必需一连誊写。
注重个中第一个必需是标志选择器，如p.class1，但偶然候会看到.class1.class2，即2个都是类选择器，在其他扫瞄器中是同意呈现这类情形的，但IE6不兼容。以下表：
两个类选择器的“交集”复合选择器扫瞄器撑持表Mac:Safari4.0撑持Mac:Chrome5.0撑持Mac:FireFox3.6撑持Mac:Opera10撑持Win:FireFox3.6撑持Win:Opera10撑持Win:IE6不撑持Win:IE7撑持Win:IE8撑持复合选择器的利用

这是个复杂的tab菜单：

登录/注册后可看大图

以下是html代码:
123456<ulclass="nav"><liclass="first"><ahref="">节目</a></li><liclass="current"><ahref="">合集</a></li><li><ahref="">草稿</a></li><liclass="last"><ahref="">项目</a></li></ul>为了完成以上效果，我们在css中可使用复合选择器。
选择<a>标签

能够用一个选择器来界说一切的<a>元素,以下:

1. .navlia{}

复制代码

登录/注册后可看大图

选择第一个<a>元素

为了增添列表左上角的圆角效果,你必要选择第一个<a>元素.这能够用以下的选择器来完成:

1. .navli.firsta{}

复制代码

登录/注册后可看大图

选择最初一个<a>元素

为了增添列表右上角的圆角效果,你必要选择最初一个<a>元素.这能够用以下的选择器来完成:

1. .navli.lasta{}

复制代码

登录/注册后可看大图

凸起显现以后页

经由过程改动tab的色彩来显现页面是以后页，我们能够在类名中到场current这个类名来完成，以下：

1. .navli.currenta{}

复制代码

登录/注册后可看大图

为以后页面的摆布上角增加圆角款式

如今有个成绩，第一个和最初一个选项被选中的时分拐角是直角的.为了到达选中时分是以后页的款式，拐角也是圆角效果，我们必要给专门给它们写特别的选择器，因为如今我们的类名都在统一个元素中，以是我们终极能够用交集复合选择器来完成，以下：

1. .nav.first.currenta{}.nav.last.currenta{}

复制代码

登录/注册后可看大图

了局

这看上往很复杂，是否是？就像下面提到的，如今的成绩是：IE5和IE6都不撑持类名交集复合选择器。IE5和IE6在辨认类名时分只会辨认最初一个类名。效果以下：

1. .nav.first.currenta{}.nav.last.currenta{}

复制代码

IE5和IE6把这2个选择器剖析为：

1. .nav.currenta{}.nav.currenta{}

复制代码

这意味着这些扫瞄器会给一切确当前页都增添圆角效果，效果以下：

登录/注册后可看大图

在IE7下也是没成绩的，申明IE7也撑持类名交集复合选择器。
办理的举措

能够给第一个和最初一个li独自加一个current的款式，但如许增添了js的包袱。
123456<ulclass="nav">;<liclass="firstfirst_current"><ahref="">节目</a></li>;<liclass="current"><ahref="">合集</a></li>;<li><ahref="">草稿</a></li>;<liclass="lastlast_current"><ahref="">项目</a></li>;</ul>;.nav.first_currenta{}
.nav.last_currenta{}

1. [/code][size=4]会商[/size]
3. 有一种办法可让我们不必在页面中增添像first、last这类过剩的类名，那就是利用css3的款式。css3让我们选择元素变得愈来愈复杂，完成头尾效果可用以下效果：
4. [code]li:first-of-typea{}li:last-of-typea{}

复制代码

</p>
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。