复合选择器是通过基本选择器进行组合后构成的，常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。
1. 交集选择器
交集选择器由两个选择器直接构成，其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式，即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。
元素选择器.类选择器|#ID选择器{
属性1:属性值1；
属性2：属性值2；
…
}PS:交集选择器由于会增加代码量，会影响性能且不利于后期维护，所以除了不得已使用外，一般不推荐使用。
2.并集选择器
并集选择器也叫分组选择器或群组选择器，它是有两个或两个以上的任意选择器组成的，不同选则器之间用","隔开，实现对多个选择器进行“集体声明”，特点是：所设置的样式对并集选择器中各个选择器都有效，它的作用是把不同选择器的相同样式抽取出来，然后放到一个地方一次性定义，从而简化了CSS代码量。
选择器1,
选择器2,
选择器3,
…{
属性1:属性值1；
属性2：属性值2；
…
}语法说明：选择器的类型任意，既可以是基本选择器，也可以是一个复合选择器。
3.后代选择器
后代选择器又称包含选择器，用于选择指定元素的后代元素
选择器1 选择器2 选择器3 …{
属性1:属性值1；
属性2：属性值2；
…
}语法说明位于左边的选择器可以包含两个或多个使用空格隔开的选择器，位于后面的选择器选择的元素术语前面选择器的孩子，这些选择器既可以是基本选择器，也可以是复合选择器，需要注意的是，后代选择器所选择的后代元素包括任意嵌套层次的后代，而且一般后代选择器中包含的选择器最多三层。
4.子元素选择器
后代选择器可以选择某个元素指定类型的所有后代元素，如果只想选择某个元素的所有子元素，则需要使用子元素选择器。
选择器1>选择器2{
属性1:属性值1；
属性2：属性值2；
…
}语法说明：">"称为左结合符，在其左右两边可以出现空格,“选择器1>选择器2”的含义为选择作为选择器1指定元素的所有选择器2指定的子元素，例如：div>span表示选择了div元素内的所有子元素span。子元素选择器中的两个选择器既可以是基本选择器，也可以是交集选择器，另外选择器1还可以是后代选择器。
我一开始觉得后代选择器和子元素选择器，它们两个似乎很像，但是它们还是有一定的区别：例如下面这两行语句：
<h1>这是非常<span>重要</span>且<span>关键</span>的一步。</h1>
<h1>这是真的非常<em><span>重要</span></em>且<em><span>关键</span></em>的一步。</h1>如果我们想操作span元素，如果使用后代选择器，即h1 span，会对这两行的span元素都进行操作，因为这两行中的span都是h1的后代，但是如果我们想只对第一行的span元素进行操作，可以用子元素选择器，即h1>span，因为第二行的span元素是em元素的子元素，并不直接是h1的子元素。
5.相邻兄弟选择器
如果需要选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
选择器1+选择器2{
属性1:属性值1；
属性2：属性值2；
…
}"+"称为相邻兄弟结合符，在其左右两边可以出现空格，"选择器1+选择器2"的含义为选择紧接在选择器1指定元素后出现选择器2指定的元素，且这两个元素拥有共同的父元素，例如：div+span 表示选择紧接在div元素后出现的span元素，其中div和span两个元素拥有共同的父元素。
6.属性选择器
在CSS中，我们还可以根据元素的属性及属性值来选择元素，此时用到的选择器称为属性选择器，属性选择器的使用主要有两种形式，其基本语法如下：
属性选择器1属性选择器2…{
属性1:属性值1；
属性2：属性值2；
…
}
元素选择器属性选择器1属性选择器2…{
属性1:属性值1；
属性2：属性值2；
…
}语法说明：属性选择器的写法是[属性表达式]，其中属性表达式可以是一个属性名，也可以是“属性=属性值”等这样的表达式，例如：[title]和[type="text"]都是属性选择器，属性选择器前可以指定某个元素选择器，此时将在指定类型的元素中进行选择，例如：img[title]只能选择具有title属性的img元素。属性选择器前也可以使用通配符"*",此时效果和第一种形式完全一样，都不限定选择元素的类型，例如：*[title]和[title]效果完全一样，都将选择具有title属性的所有元素，注意"*"和属性选择器之间没有空格，另外可以连续使用多个不同的属性选择器，此时将进一步缩小元素选择的范围，例如：a[href][title]用于选择同时具有href和title属性的a元素
| 类型 | 选择器 | 描述 |
|---|---|---|
| 根据属性选择 | [属性] | 用于选取带有指定属性的元素 |
| 根据属性和值选择 | [属性=值] | 用于选取带有指定属性和值的元素 |
| 根据部分属性值选择 | [属性~=值] | 用于选取属性值中包含指定值的元素，注意该值必须是一个完整的单词 |
| 子串匹配属性值 | [属性 |=值] | 用于选取属性值以指定值开头的元素，注意该值必须是一个完整的单词或带有”_”作为连接符连接 后续内容的字符串，如“en-” |
| 子串匹配属性值 | [属性^=值] | 用于选取属性值以指定值开头的元素 |
| 子串匹配属性值 | [属性$=值] | 用于选取属性值以指定值结尾的元素 |
| 子串匹配属性值 | [属性$=值] | 用于选取属性值以指定值结尾的元素 |
| 子串匹配属性值 | [属性*=值] | 用于选取属性值中包含指定值的元素 |