上一节介绍了3种基本的选择器,以这3种基本选择器为基础,通过组合,还可以产生更多种类的选择器,实现更强、更方便的选择功能,复合选择器就是基本选择器通过不同的连接方式构成的。
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器。
“交集”复合选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写,形式如下示例所示。
这种方式构成的选择器,将选中同时满足前后二者定义的元素,也就是前者所定义的标记类型,并且指定了后者的类别或者id的元素,因此被称为“交集”选择器。
例如,声明了p、.spccial、p.special这3种选择器,它们的选择范围如下示例所示。
下面举一个实际案例,示例文件位于网页学习网CSS教程资源中“第1章\09.htm”。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>选择器.class</title>
- <style type="text/css">
- p{ /* 标记选择器 */
- color:blue;
- }
- p.special{ /* 标记.类别选择器 */
- color:red; /* 红色 */
- }
- .special{ /* 类别选择器 */
- color:green;
- }
- </style>
- </head>
- <body>
- <p>普通段落文本</p>
- <h3>普通标题文本</h3>
- <p class="special">指定了.special类别的段落文本</p>
- <h3 class="special">指定了.special类别的标题文本</h3>
- </body>
- </html>
上面的代码中定义了<p>标记的样式,也定义“.special”类别的样式,此外还单独定义了p.special.用于特殊的控制.而在这个p.special中定义的风格样式仅仅适用于<p class="special">标记,而不会影响使用了.special的其他标记,显示效果如图1所示。
图1 标记.类别选择器示例
与交集选择器相对应,还有一种“并集”选择器,它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标记选择器、class类别选择器、ID选择器等)都可以作为并集选择器的一部分。
并集选择器是多个选择器通过逗号连接而成的.在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。其效果如下示例所示。
下面举一个实际案例,示例文件位于网页学习网CSS教程资源中“第1章\10.htm”。
- <html>
- <head>
- <title>并集选择器</title>
- <style type="text/css">
- h1, h2, h3, h4, h5, p{ /*并集选择器*/
- color:purple; /* 文字颜色 */
- font-size:15px; /* 字体大小 */
- }
- h2.special, .special, #one{ /* 集体声明 */
- text-decoration:underline; /* 下划线 */
- }
- </style>
- </head>
- <body>
- <h1>示例文字h1</h1>
- <h2 class="special">示例文字h2</h2>
- <h3>示例文字h3</h3>
- <h4>示例文字h4</h4>
- <h5>示例文字h5</h5>
- <p>示例文字p1</p>
- <p class="special">示例文字p2</p>
- <p id="one">示例文字p3</p>
- </body>
- </html>
其显示效果如图2所示,可以看到所有行的颜色都是紫色,而且字体大小均为15px。这种集体声明的效果与单独声明的效果完全相同,h2.special、.special和#one的声明并不影响前一个集体声明,第2行和最后两行在紫色和大小为15px的前提下使用了下划线进行突出。
图2 集体声明
另外,对于实际网站中的一些页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有的标记都使用同一种CSS样式,但又不希望逐个来声明的情况,可以利用全局选择器“*”,如下例所示,示洌文件位于网页学习网CSS教程资源中“第1章\11.htm”。
- <html>
- <head>
- <title>全局声明</title>
- <style type="text/css">
- *{ /* 全局声明 */
- color:purple; /* 文字颜色 */
- font-size:15px; /* 字体大小 */
- }
- h2.special, .special, #one{ /* 集体声明 */
- text-decoration:underline; /* 下划线 */
- }
- </style>
- </head>
- <body>
- <h1>全局声明h1</h1>
- <h2 class="special">全局声明h2</h2>
- <h3>全局声明h3</h3>
- <h4>全局声明h4</h4>
- <h5>全局声明h5</h5>
- <p>全局声明p1</p>
- <p class="special">全局声明p2</p>
- <p id="one">全局声明p3</p>
- </body>
- </html>
其效果和图2类似,与前面案例的效果完全相同,代码却大大缩减了。WANGYEXX.COM
在CSS选择器中,还可以通过嵌套的方式,对特殊位置的HTML标记进行声明,例如当<p>与</p>之间包含<span></span>标记时,就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记发生嵌套时,内层的标记就成为外层标记的后代。
例如,假设有下面的代码:
- <p>这是最外层的文字,<span>这是中间层的文字,<b>这是最内层的文字,</b></span></p>
最外层是<p>标记,里面嵌套了<span>标记,<span>标记中又嵌套了<b>标记,则称span是p的子元素,b是span的子元素。
下面举一个完整的例子,具体代码如下所示,示洌文件位于CSS教程资源中“第1章\12.htm”。
- <html>
- <head>
- <title>后代选择器</title>
- <style type="text/css">
- p span{ /* 嵌套声明 */
- color:red; /* 颜色 */
- }
- span{
- color:blue; /* 颜色 */
- }
- </style>
- </head>
- <body>
- <p>嵌套使<span>用CSS</span>标记的方法</p>
- 嵌套之外的<span>标记</span>不生效
- </body>
- </html>
通过将span选择器嵌套在p选择器中进行声明,显示效果只适用于<p>和</p>之间的<span>标记,而其外的<span>标记并不产生任何效果,如图3所示,只有第1行中<span>和</span>之间的文字变成了红色,而第2行文字中<span>和</span>之间的文字的颜色则是按照第2条CSS样式规则设置的,即为蓝色。
图3 嵌套选择器
后代选择器的使用非常广泛,不仅标记选择器可以以这种方式组合,类别选择器和ID选择器都可以进行嵌套。下面是一些典型的语句:
- .special i{ /* 使用了属性special的标记里面的包含的i *//
- color:red;
- }
- #one li{ /* ID为one的标记里面包含的<li> */
- color:green;
- }
- td.top .top1 strong{ /* 多层嵌套,同样使用 */
- color:blue;
- }
上面的第3行使用了3层嵌套,实际上更多层的嵌套在语法上都是允许的。上面的这个3层嵌套表示的就是使用了.top类别的<td>标记中包含的.top1类别的标记,其中又包含了<strong>标记,一种可能的相对成的HTML为:
- <td class="top">
- <p>
- 其他内容<strong>CSS控制内容</strong>其他内容
- </p>
- </td>
经验:选择器的嵌套在CSS的缩写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记(父标记)定义class或者id,内层标记(子标记)能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明,倒如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用“ul li{…}”的嵌套方式来设置。
需要注意的是,后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响倒它的“各级后代”。
例如,有如下的HTML结构:
- <p>这是最外层的文字,<span>这是中间层的文字,<b>这是最内层的文字,</b></span></p>
如果设置了如下CSS样式:
- p span{
- color:blue;
- }
那么“这是最外层的文字”这几个字将以黑色显示,即没有设置样式的颜色;后面的“这是中间层的文字”和“这是最内层的文字”,都属于它的后代,因此都会变成蓝色。
因此在CSS 2中,规范的制定者还规定了一种复合选择器。称为“子选择器”,也就是只对直接后代有影响的选择器,而对“孙子”以及多个层的后代不产生作用。WANGYEXX.COM
子选择器和后代选择的语法区别是,使用大于号连接。例如,将上面的css设置为:
- p>span{
- color:blue;
- }
而IE 6中,不支持子选择器,仅支持后代选择。IE 7 IE 8和Firefox都既支持后代选择器,也支持子选择器。