1.4 复合选择器

1.3节介绍了3中基本选择器，以这3中基本选择器味基础，通过组合，还可以产生更多种类的选择器，为实现更强，更方便的选择器功能，复合选择器就是基本选择器通过不同的链接方式构成的。
复合选择器就是两个或多个基本选择器，通过不同方式链接而成的选择器。

学e39l网1PoC页BWd9网(http://www.xwangye.com)

1.4.1 “交集”选择器

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

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.13　　标记类别选择器

这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的类别或者id的元素，因此被称为“交集”选择器。
例如，声明了p、.spesial、p.special这三种选择器，它们的选择范围如图1.14所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.14　　交集选择器示意图

下面举一个实际案例

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择器.class</title>
<style type="text/css">
p{color:blue;}
p.special{color:red;}
.special{color:green;}</style>
</head>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<body>
<p>普通文本</p>
<h3>普通标题文本</h3>
<p class="special">指定了.special类别的段落文本</p>
<h3 class="spescial">指定了.special类别的标题文本</h3>
</body>
</html>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

上面的代码中定义了<p>标记的样式，也定义了“.special”类别的样式，此外还单独定义了p.special，用于特殊的控制，而在这个p.special中定义的风格样式仅仅适用于<p class="special">标记，而不会影响使用了.special的其他标记，显示效果如图1.15所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


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

1.4.2 “并集”选择器

学e39l网1PoC页BWd9网(http://www.xwangye.com)

与交集选择器相对应，还有一种“并集”选择器，它的结果是同时选中各个基本选择器所选的范围。任何形式的选择器（包括标记选择器、class类别选择器、ID选择器）都可以作为并集选择器的一部分。
并集选择器是多个选择器通过逗号链接而成的，在声明各种CSS选择器时，如果某些选择器风格时完全相同的，或者部分相同，这时便可以利用并集选择器同时声明风格相同的CSS选择器。其效果如图1.16所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.16　　并集选择器示意图

下面举一个实际的案例：

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>class选择器</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>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<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>

学e39l网1PoC页BWd9网(http://www.xwangye.com)


学e39l网1PoC页BWd9网(http://www.xwangye.com)

显示效果如图1.17所示，可以看到所有行的颜色都是紫色，而且大小均为15px。这种集体声明的效果与单独声明的效果完全相同，h2.special,.special和#one的声明并不影响前一个集体的声明，第二行和最后两行再紫色和大小均为15px的前提下使用了下划线进行突出。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.17　　集体声明

另外，对于实际网站中的一些网页，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个声明的情况，可以利用全局选择器“*”如下例所示，

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>class选择器与标记选择器</title>
<style type="text/css">
p{ color:blue; font-size:18px;}
.special{ color:red; font-size:23px;}
</style>
</head>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<body>
<p>class选择器与标记选择器1</p>
<p>class选择器与标记选择器2</p>
<p>class选择器与标记选择器3</p>
<p class="special">class选择器与标记选择器4</p>
<p>class选择器与标记选择器5</p>
<p>class选择器与标记选择器6</p>
</body>
</html>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

首先通过标记选择器定义<p>标记的全局显示方案，然后再通过一个class选择器对需要突出的<p>标记进行单独设置，这样大大提高了代码编写的效率，显示效果如图1.9所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.9　　两种选择器配合

在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度，如下例所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同时使用两个class</title>
<style type="text/css">
.one{ color:blue;}
.two{ font-size:22px;}
</style>
</head>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<body>
<h4>一种都不使用</h4>
<h4 class="one">使用第一种</h4>
<h4 class="two">使用第二种</h4>
<h4 class="one two">同时使用两种</h4>
</body>
</html>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

显示效果如图1.10所示，可以看到第一种class的第二行显示为蓝色，而第3行则仍为黑色，但是由于使用了.two，因此文字变大。第4行通过“class="one two"”将两个样式同时加入，得到蓝色大字体。第1行没有使用任何样式，仅作为参考。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.10　　同时使用两种CSS风格

1.3.3 ID选择器

学e39l网1PoC页BWd9网(http://www.xwangye.com)

ID选择器的使用方法与class选择器基本相同；不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图1.11所示。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.11　ID选择器

下面举一个实际案例

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ID选择器</title>
<style type="text/css">
#one{ font-weight:blod;}
#two{ font-size:30px;
color:#009900;}</style>
</head>

学e39l网1PoC页BWd9网(http://www.xwangye.com)

<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器4</p>
</body>
</html>

学e39l网1PoC页BWd9网(http://www.xwangye.com)


学e39l网1PoC页BWd9网(http://www.xwangye.com)

显示效果如图1.12所示，第2行与第3行都显示的CSS的方案。可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可调用，JavaScript等其他脚本语言同样也可以调用、因为这个特性，所以不要将ID选择器用于多个标记，否则会出现意想不到的错误。如果一个HTML中有两个相同的id标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById().
正因为JavaScript等脚本语言也能调用HTML中设置的id,所以ID选择器一直被广泛的使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外从图1.12可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似“id="one two"”这样的写法是完全错误的语法。

学e39l网1PoC页BWd9网(http://www.xwangye.com)


图1.12　　ID选择器示例