在css中有三种基本选择器：标签选择器、类选择器、ID选择器。（另外：这三种基本选择器通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能。）
复合选择器：是两个或多个基本选择器通过不同方式连接而成的选择器。
一、“交集”选择器
“交集”选择器由两个选择器直接连接构成，
注意：
（1）第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器
（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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>选择器.class</title>
<style type=”text/css”>
p {
color: blue;
}
.special {
color: green;
}
p.special {
color:red;
}
</style>
</head>
<body>
<p>普通段落文本（蓝色）</p>
<h3>普通标题文本（黑色）</h3>
<p class=”special”>指定了.special类别的段落文本（红色）</p>
<h3 class=”special”>指定了.special类别的标题文本（绿色）</h3>
</body>
</html>
二、“并集”选择器
“并集”选择器又称为“集体声明”，是同时选中各个基本选择器所选择的范围。
注意：
（1）任何形式的选择器（包括标记选择器、class类别选择器、ID选择器等）都可以作为并集选择器的一部分。
（2）并集选择器是多个选择器通过“逗号”连接而成的。
下面举一个实际案例：
<html>
<head>
<title>并集选择器</title>
<style type=”text/css”>
h1,h2,h3,h4,h5,p{
color: red;
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>
三、“后代”选择器
(1)“后代”选择器是通过嵌套的方式，对特殊位置的HTML标记进行声明。
注意：
（1）后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用“空格”分隔。
（2）当标记发生嵌套时，内层的标记就称为外层标记的后代。
下面举一个实际案例：
<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>
(2)后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和id 选择器也都可以进行嵌套。
.special i{color:red;}
#one li{padding-left:5px;}
td .out .inside strong{font-size:16px;} /*多层嵌套，同样实用*/
<td class=“out”>
<p class=“inside”>
其他内容<strong>CSS控制的部分</strong>其他内容
</P>
</td>另外：1、对于实际网站中的一些页面，对于实际网站中的一些页面，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个来声明的情况，就可以利用全局选择器“*”也叫通配选择器。
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>并集选择器</title>
<style type=”text/css”>
*{
margin:0px;/*定义所有元素的边界为0，若不定义 ，则浏览器会对各个元素应用默认的值。*/
color: purple;
font-size:15px;
}
</style>
</head>
<body>
……
</body>
</html>