摘要：五后代選擇器包含選擇器后代選擇器可以選擇作為某元素后代的元素。匹配下所有的元素匹配所有為的下所有的元素匹配成功匹配失敗注意有關后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。子元素選擇器，選擇其子元素。

CSS選擇器是學習CSS的一個核心部分，HTML頁面中的元素就是通過CSS選擇器來進行控制的，熟練使用CSS選擇器能迅速根據文檔結構對文檔樣式進行一對一，一對多或者多對一的控制和調整。

文檔的元素是最基本的選擇器也是最常見的選擇器，如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，如：

html {margin: 0; padding: 0;}
h1 {font-family: "華文楷體"; color:blue;}
a {font-size:16px; text-decoration: none;}

在 W3C 標準中，元素選擇器又稱為類型選擇器（type selector）。類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例，所以類似HTML, XML等標記語言都可以通過類型選擇器來匹配，甚至一些自定義標簽都會生效。

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以多帶帶使用，也可以與其他元素結合使用。

提示： 只有適當地標記文檔后（指定claess屬性），才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。

語法： 類選擇器前面有個"."。

/* 基本語法 */
.important {color:red;}
/* 結合通配符使用 */
*.important {color:red;}
/* 結合元素使用，解釋為：其 class 屬性值為 important 的所有 p 元素 */
p.important {color:red;}

CSS多類選擇器

HTML元素的class屬性可以包含一個詞列表，各個詞之間用空格分隔，詞的順序無關緊要。如：

    This paragraph is a very important.



    This paragraph is a very warning.



    This paragraph is a very important warning.

設置class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important {font-weight:bold;}
.warning {font-style:italic;}
/* 注意：在HTML元素的class屬性中的兩個詞需要用“空格”隔開，在CSS中不能用“空格”隔開 */
.important.warning {background:silver;}

注意： 把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限），如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。如：

p.important.urgent {background:silver;}

這個選擇器將只匹配 class 屬性中同時包含詞 important 和 urgent 的 p 元素。因此，如果一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素：

    This paragraph is a very important.




    This paragraph is a very important.

語法： ID選擇器前面有個"#"。

/* 基本語法 */
#intro {font-weight:bold;}
/* 配合通配符使用 */
*#intro {font-weight:bold;}

與Javascript的區別：

/* 在同一個頁面中能匹配所有 ID 為 mostImportant 的元素 */
#mostImportant {color:red; background:yellow;}

/* 在同一個頁面中只能獲取文檔中第一個 ID 為 mostImportant 的內容 */
document.getElementById("mostImportant").innerHTML;

This is important!
This is important!
This is important!

與類選擇器的區別：

區別 1：只能在文檔中使用一次
不同于類選擇器，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。

區別 2：不能使用 ID 詞列表
不同于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

注意：

關于命名：id和class屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用；

關于大小寫：id和class在HTML和XHTML中是區分大小的。

CSS 2 引入了屬性選擇器。屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

簡單屬性選擇：

/* 通過單個屬性選擇 */
*[title] {color:red;}
a[href] {color:red;}

/* 通過多個屬性選擇，注意：匹配同時含有多個屬性的元素 */
a[href][title] {color:red;}
img[alt][title] {border: 5px solid red;}

根據完全匹配的屬性值選擇：

/* 通過單個屬性值選擇 */
a[] {color: red;}

/* 通過多個屬性值選擇 */
a[] {color: red;}

根據部分屬性值選擇

后代選擇器可以選擇作為某元素后代的元素。

語法： 父元素和后代元素從左至右排列，中間用空格隔開。

/* 匹配 h1 下所有的 em 元素 */
h1 em {color:red;}

/* 匹配所有 class 為 "maincontent" 的 div下所有的 a 元素 */
div.maincontent a {color:blue;}

This is a important heading


This is a important paragraph.

注意： 有關后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會選擇以下標記中的所有 em 元素：

  
  0
  
List item 1
    

      
List item 1-1
      
List item 1-2
      
List item 1-3
        

          
List item 1-3-1
          
          
List item 1-3-2
          
List item 1-3-3
        
      
      
List item 1-4
    
  
  
List item 2
  
List item 3

與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

如果你不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，那就要使用子元素選擇器。

后代元素： 所有由其包裹的元素；

子代元素： 由其包裹，層級結構只比其小一級的元素；

語法： 父元素和子元素從左至右排列，中間用 > 隔開。

/* 選擇只作為 h1 元素子元素的 strong 元素 */
h1 > strong {color:red;}

This is very very important.

This is really very important.

結合后臺選擇器和子選擇器

/* 選擇所有 class 為 "company" 的 table 的所有后代 td 的子元素 p */
table.company td > p

可選擇緊接在另一元素后的元素，且二者有相同父元素。

語法：兄弟元素從左至右排列，中間用 + 隔開。

/* 選擇緊接在 h1 后（前面的元素不能匹配）的元素，而且二者有相同的父元素 */
h1 + p {color: red;}

第一個段落
標題

第二個段落

第二個段落

總結：

用于向某些選擇器添加特殊的效果。

語法： 選擇器和偽類之間通過 : 隔開。

/* 選擇器 : 偽類 */
selector : pseudo-class {property: value}
/* CSS 類也可與偽類搭配使用 */
selector.class : pseudo-class {property: value}

錨偽類

a:link {color: #FF0000}        /* 未訪問的鏈接 */
a:visited {color: #00FF00}    /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標移動到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

偽類名稱對大小寫不敏感。

:first-child 偽類和:laft-child偽類

可以使用 :first-child 偽類來選擇元素的第一個子元素。

  
  
These are the necessary steps:
    

         
        
Intert Key
        
Turn key
            
            clockwise
         
        
Push accelerator
    
     
    
Do
      
      not
      push the brake at the same time as the accelerator.
    

/* 選擇的就是第一個 p 元素，而不是 p 元素的第一個子元素 */
p:first-child {font-weight: bold;}
/* 選擇的就是最后一個 p 元素，而不是 p 元素的最后一個子元素 */
p:last-child {font-weight: bold;}
/* 選擇的就是第一個 li 元素，而不是 li 元素的第一個子元素 */
li:first-child {text-transform: uppercase;}
/* 通過CSS設置字母的大小寫 */
li:first-child {text-transform: lowercase;}

偽類匯總

偽元素

偽元素可用于定位文檔中包含的文本，為與偽類進行區分，偽元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。

W3School CSS 選擇器

CSS選擇器詳解

十分鐘搞定CSS選擇器