CSS 复合选择器

 

　　以前介绍了3种（标记选择器、类别选择器、ID选择器）基本的选择器，以这3种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是由基本选择器通过不同的连接方式构成的。

 

　　复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。

 

　　1. “交集”选择器

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

 

 

 

图1 标记类别选择器

　　这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者所定义的标记类型，并且指定了后者的类别或者id的元素，因此被称为“交集”选择器。

 

　　例如，声明了p、.special、p.special这3种选择器，它们的选择范围如图2所示。

图2 交集选择器示意图

　　下面举一个实际案例，代码如下：

 

 

普通段落文本（蓝色）

普通标题文本（黑色）

指定了.special类别的段落文本（红色）

指定了.special类别的标题文本（绿色）

 

 

　　上面的代码中定义了

标记的样式，也定义“.special”类别的样式，此外还单独定义了p.special，用于特殊的控制，而在这个p.special中定义的风格样式仅仅适用于

标记，而不会影响使用了.special的其他标记，显示效果如下图3所示。

 

图3 标记.类别选择器示例

　　相关阅读

　　CSS 复合选择器 —— “并集”选择器

　　CSS 复合选择器 —— 后代选择器