摘要：后代選擇器后代選擇器又稱包含選擇器，用于選擇指定元素的后代元素。這些選擇器既可以是基本選擇器，也可以是一個復合選擇器。注意元素選擇器及和屬性選擇器之間沒有空格。

復合選擇器是通過基本選擇器進行組合后構成的，常用的復合選擇器有：

交集選擇器

并集選持器

后代選擇器

子元素選擇器

相鄰兄弟選擇器

屬性選擇器

交集選擇器

交集選擇器由兩個選擇器直接連接構成，其中第一個選擇器必須是元素選擇器，第二個選擇器必須是類選擇器或者 ID 選擇器，例如：div.txt、div#txtID。兩個選擇器之間必須連續寫，不能有空格。交集選擇器選擇的元素必須是由第一個選擇器指定的元素類型，該元素必須包含第二個選擇器對應的 ID 名或類名。交集選擇器選擇的元素的樣式是三個選擇器樣式，即第一個選擇器
使用交集元素選擇器設置樣式的語法如下：

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

語法說明：“類選擇器｜ ID 選擇器”表示使用類選擇器，或者使用 ID 選擇器。

【示例 2-15】使用交集選擇器設置樣式。

    
 元素選擇器效果 
    
 交集選擇器效果 
     類選擇器效果 

上述 CSS 代碼定義了 div 元素、類選擇器 txt 和它們的交集選擇器 div.txt 的樣式。交集選擇器所定義的背景顏色只作用于

選擇器 1,
選擇器 2,
選擇器 3,
… { 
     屬性 1: 屬性值 1；
     屬性 2: 屬性值 2；
     ... 
}
語法說明：選擇器的類型任意，既可以是基本選擇器，也可以是一個復合選擇器。
【示例 2-16】使用并集選擇器設置樣式。








     
 這是 DIV1
     
 這是 DIV2
     
 這是段落一 
     
 這是段落二 
      這是一個 SPAN

上述 CSS 代碼中共定義了四個選擇器的樣式。其中，前三個是元素選擇器，用于定義各類元素的樣式，第四個選擇器：span,.p1,#d1為并集選擇器，用于定義 span、第一個段落和第一個 div 這三個元素的公共樣式，即淺灰色背景。我們看到該并集選擇器中包含了元素選擇器、類選擇器和 ID 選擇器，這完全符合前面說的并集選擇器可以是任意類型的選擇器的特點。示例 2-15 的運行結果如圖 2-16 所示。

后代選擇器

后代選擇器又稱包含選擇器，用于選擇指定元素的后代元素。使用后代選擇器可以幫助我們更快更確切地找到目標元素。
使用后代元素選擇器設置樣式的語法如下：

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

語法說明：位于左邊的選擇器可以包含兩個或多個使用空格隔開的選擇器，位于后面的選擇器選擇的元素屬于前面選擇器選擇元素的子級。這些選擇器既可以是基本選擇器，也可以是一個復合選擇器。選擇器之間的空格是一種結合符，按從右到左的方式順序讀選擇器。此時，每個空格結合符可以解釋為“××× 作為 ××× 的后代”，例如 div p 表示 p 作為 div 的后代。需注意的是，后代選擇器所選擇的后代元素包括任意嵌套層次的后代，所以 div p 又可解釋為作為 div 后代元素的任意 p 元素。另外，雖然后代選擇器中可以包含任意多個選擇器，但為了便于閱讀和理解，后代選擇器中包含的選擇器一般最多包含三級。
【示例 2-17】使用后代選擇器設置

     

         
 段落一 
         
 段落二 
     
     

         
 段落三 
         
 段落四 
     
     
 段落五 
     
 段落六 

上述 CSS 代碼中定義了兩個后代選擇器樣式，其中“#box1 .p1”后代選擇器用于選擇 ID 為 box1 元素中類名為 p1 的所有后代元素；“#box2 p”后代選擇器用于選擇 ID 為 box2 的元素中所有類型為 p 的后代元素。上述代碼在瀏覽器中的運行結果如圖 2-17 所示

從圖 2-17 中可以看到，“#box1.p1”后代選擇器只選擇了段落一，雖然段落三和段落五的類名都是 p1，但由于它們不屬于 #box1 元素的后代，因而沒有被選擇；而“#box2 p”后代選擇器則只選擇了段落三和段落四，其他段落的類型雖然也都是 p，但由于它們不屬于 #box2 的后代，所以也沒有被選擇。

子元素選擇器

后代選擇器可以選擇某個元素指定類型的所有后代元素，如果只想選擇某個元素的所有子元素，則需要使用子元素選擇器。
使用子元素選擇器設置樣式的語法如下：

選擇器 1> 選擇器 2 {
      屬性 1: 屬性值 1; 
      屬性 2: 屬性值 2;
     …
}

語法說明：“>”稱為左結合符，在其左右兩邊可以出現空格，“選擇器 1> 選擇器 2”的含意為“選擇作為選擇器 1 指定元素的所有選擇器 2 指定的子元素”，例如：div>span 表示選擇了 div 元素內所有子元素 span。
子元素選擇器中的兩個選擇器既可以是基本選擇器，也可以是交集選擇器，另外選擇器 1 還可以是后代選擇器。
【示例 2-18】子元素選擇器應用示例。

    
 這是非常非常  重要  且  關鍵  的一步。
    
 這是真的非常  重要  且  關鍵  的一步。

上述 CSS 代碼中的 h1>span 選擇了 h1 元素的所有子元素 span。在第一個 h1 元素中的兩個 span 就是 h1 的子元素。而第二個 h1 中的兩個 span 是 h1 元素中 em 里的子元素，它屬于 h1 元素的子元素的子元素，所以沒有被選中。因而 CSS 樣式只對第一個 h1 元素的兩個 span 元素有效，即只有第一行中的“重要”和“關鍵”這兩個詞顯示紅色，第二行的這兩個詞顏色沒變。上述代碼在 Chrome 瀏覽器中的運行結果如圖 2-18 所示。

相鄰兄弟選擇器

如果需要選擇緊接在某個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。相鄰兄弟選擇器的基本語法如下。

選擇器 1+ 選擇器 2 {
     屬性 1: 屬性值 1; 
     屬性 2: 屬性值 2;
     …
}

語法說明：“+”稱為相鄰兄弟結合符，在其左右兩邊可以出現空格，“選擇器 1+ 選擇器 2”的含意為選擇緊接在選擇器 1 指定元素后出現的選擇器 2 指定的元素，且這兩個元素擁有共同的父元素，例如：div+span 表示選擇緊接在 div 元素后出現的 span 元素，其中 div 和 span 兩個元素擁有共同的父元素。
【示例 2-19】相鄰兄弟選擇器應用示例。

     
 這是一個一級標題 
     
 這是段落 1。
     
 這是段落 2。
     
 這是段落 3。

上述 CSS 代碼中的 h1+p 選擇了 h1 元素后面的第一個 p，而 p+p 則選擇了第一個 p 元素后面的各個 p 元素，因而第二個和第三個段落使用了 p+p 選擇器樣式，而第一個段落則使用了 h1+p 選擇器樣式。上述代碼在 Chrome 瀏覽器中的運行結果如圖 2-19 所示。

屬性選擇器

在 CSS 中，我們還可以根據元素的屬性及屬性值來選擇元素，此時用到的選擇器稱為屬性選擇器。屬性選擇器的使用主要有 2 種形式，基本語法分別如下。

    屬性選擇器 1 屬性選擇器 2...{
         屬性 1: 屬性值 1;
         屬性 2: 屬性值 2;
         …
    }

元素選擇器屬性選擇器 1 屬性選擇器 2... {
     屬性 1: 屬性值 1;
     屬性 2: 屬性值 2;
     …
}

語法說明：屬性選擇器的寫法是 [ 屬性表達式 ]，其中屬性表達式可以是一個屬性名，也可以是“屬性＝屬性值”等這樣的表達式，例如：[tilte] 和 [type="text"] 都是屬性選擇器。屬性選擇器前可以指定某個元素選擇器，此時將在指定類型的元素中進行選擇，例如：img[title] 只能選擇具有 title 屬性的 img 元素。屬性選擇器前也可以使用通配符 ，此時效果和第一種形式完全一樣，都不限定選擇元素的類型，例如：[title] 和 [title] 效果完全一樣，都將選擇具有 title 屬性的所有元素。

注意：元素選擇器及“*”和屬性選擇器之間沒有空格。另外，可以連續使用多個不同的屬性選擇器，此時將進一步縮小元素選擇的范圍，例如 ahref 用于選擇同時具有 href 和 title 屬性的 a 元素。
常見的屬性選擇器格式如表 2-3 所示。

【示例 2-20】屬性選擇器的應用。

[title] {/* 選擇具有 title 屬性的元素 */
     color: #F6F;
}
a[href][title]{/* 選擇同時具有 href 和 title 屬性的 a 元素 */
     font-size: 36px;
}
img[alt] {/* 選擇具有 alt 屬性的 img 元素 */
     border: 3px #f00 solid;
}
p[align="center"] {/* 選擇 align 屬性等于 center 的 p 元素 */
     color: red;
    font-weight: bolder;
}



     
 應用屬性選擇器樣式：
     
Helloworld
      返首頁 


     
     
 段落一 
     

     
 沒有應用屬性選擇器樣式
     
Helloworld
      返首頁 


     
     
 段落二 

上述 CSS 代碼中使用了三個屬性選擇器，其中 [title] 屬性選擇器選擇了第一個 h3 和第一個 a 元素，這兩個元素都具有“title”屬性；ahref 屬性選擇器選擇了第一個 a 元素，因為只有它同時具有 href 和 title 屬性，所以第一個 a 元素同時具有了 [title] 屬性器和 ahref 屬性選擇器樣式；img[alt] 選擇器通過前面的 img 元素限定只能選擇圖片對象，而根據屬性選擇器，只選擇了第一個 img 元素，因為只有它才具有“alt”屬性；p[align="center"] 選擇器通過前面的 p 元素限定了只能選擇段落對象，根據屬性選擇器則只能選擇第一個 p 元素，因為只有它才具有 align 屬性，且值為“center”。上述代碼在在 Chrome 瀏覽器中的運行結果如圖 2-20 所示。

至此，我們已學習了一些常用的基本選擇器和復合選擇器。下一節我們來總結一下這些選擇器的使用方法。