CSS教程:1.4 复合选择器

最新推荐文章于 2023-03-31 22:57:54 发布

w617280955

最新推荐文章于 2023-03-31 22:57:54 发布

阅读量1k

点赞数

分类专栏： html css 文章标签： css class html firefox ie 框架

html css 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、“交集”选择器

二、“并集”选择器

三、后代选择器

上一节介绍了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>

上面的代码中定义了标记的样式，也定义“.special”类别的样式，此外还单独定义了p.special．用于特殊的控制．而在这个p.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>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层的文字，</b></span></p>

最外层是标记，里面嵌套了标记，标记中又嵌套了标记，则称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选择器中进行声明，显示效果只适用于和之间的标记，而其外的标记并不产生任何效果，如图3所示，只有第1行中和之间的文字变成了红色，而第2行文字中和之间的文字的颜色则是按照第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类别的标记，其中又包含了标记，一种可能的相对成的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都既支持后代选择器，也支持子选择器。

w617280955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS教程:1.4 复合选择器

一、“交集”选择器二、“并集”选择器三、后代选择器上一节介绍了3种基本的选择器，以这3种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是基本选择器通过不同的连接方式构成的。复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。一、“交集”选择器“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元
复制链接

扫一扫