以前介绍了3种（标记选择器、类别选择器、ID选择器）基本的选择器，以这3种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能，复合选择器就是由基本选择器通过不同的连接方式构成的。
复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。
1. “交集”选择器
“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第1个必须是标记选择器，第2个必须是类别选择器或者是ID选择器。这两个选择器之间不能有空格，必须连续书写，形式如图1所示。
图1 标记类别选择器
这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者所定义的标记类型，并且指定了后者的类别或者id的元素，因此被称为“交集”选择器。
例如，声明了p、.special、p.special这3种选择器，它们的选择范围如图2所示。
图2 交集选择器示意图
下面举一个实际案例，代码如下：
<!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> <mce:style type="text/css"><!-- p{ /* 标记选择器 */ color:blue; } p.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ } .special { /* 类别选择器 */ color:green; } --></mce:style><style type="text/css" mce_bogus="1">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的其他标记，显示效果如下图3所示。
图3 标记.类别选择器示例
相关阅读
CSS 复合选择器 —— “并集”选择器
CSS 复合选择器 —— 后代选择器
