複合選擇器是通過基本選擇器進行組合後構成的，常用的複合選擇器有：交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。
1. 交集選擇器
交集選擇器由兩個選擇器直接構成，其中第一個必須是元素選擇器，第二個必須是類選擇器或者ID選擇器。兩個選擇器之間必須連續寫，不能有空格。交集選擇器選擇的元素必須是有第一個選擇器指定的元素型別，該元素必須包含第二個選擇器對應的ID或者類名。交集選擇器選擇的元素是三個選擇器的樣式，即第一個選擇器、第二個選擇器和交集選擇器三個選擇器樣式的層疊效果。

元素選擇器.類選擇器|#ID選擇器{
    屬性1:屬性值1；
    屬性2
 
：屬性值2；
    …
}

PS:交集選擇器由於會增加程式碼量，會影響效能且不利於後期維護，所以除了不得已使用外，一般不推薦使用。

2.並集選擇器
並集選擇器也叫分組選擇器或群組選擇器，它是有兩個或兩個以上的任意選擇器組成的，不同選則器之間用","隔開，實現對多個選擇器進行“集體宣告”，特點是：所設定的樣式對並集選擇器中各個選擇器都有效，它的作用是把不同選擇器的相同樣式抽取出來，然後放到一個地方一次性定義，從而簡化了CSS程式碼量。

選擇器1,
選擇器2,
選擇器3,
…{
    屬性1:屬性值1；
    屬性2：屬性值2；
    …
}

語法說明：選擇器的型別任意，既可以是基本選擇器，也可以是一個複合選擇器。

選擇器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元素