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

CSS選擇器是學(xué)習(xí)CSS的一個(gè)核心部分，HTML頁面中的元素就是通過CSS選擇器來進(jìn)行控制的，熟練使用CSS選擇器能迅速根據(jù)文檔結(jié)構(gòu)對文檔樣式進(jìn)行一對一，一對多或者多對一的控制和調(diào)整。

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

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

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

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

提示： 只有適當(dāng)?shù)貥?biāo)記文檔后（指定claess屬性），才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計(jì)劃。要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，最常用的方法就是使用類選擇器。

語法： 類選擇器前面有個(gè)"."。

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

CSS多類選擇器

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

    This paragraph is a very important.



    This paragraph is a very warning.



    This paragraph is a very important warning.

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

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

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

p.important.urgent {background:silver;}

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

    This paragraph is a very important.




    This paragraph is a very important.

語法： ID選擇器前面有個(gè)"#"。

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

與Javascript的區(qū)別：

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

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

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

與類選擇器的區(qū)別：

區(qū)別 1：只能在文檔中使用一次
不同于類選擇器，在一個(gè) HTML 文檔中，ID 選擇器會(huì)使用一次，而且僅一次。

區(qū)別 2：不能使用 ID 詞列表
不同于類選擇器，ID 選擇器不能結(jié)合使用，因?yàn)?ID 屬性不允許有以空格分隔的詞列表。

注意：

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

關(guān)于大小寫：id和class在HTML和XHTML中是區(qū)分大小的。

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

簡單屬性選擇：

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

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

根據(jù)完全匹配的屬性值選擇：

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

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

根據(jù)部分屬性值選擇

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

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

/* 匹配 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.

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

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

因此，ul em 將會(huì)選擇以下標(biāo)記中的所有 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）只能選擇作為某元素子元素的元素。

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

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

子代元素： 由其包裹，層級(jí)結(jié)構(gòu)只比其小一級(jí)的元素；

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

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

This is very very important.

This is really very important.

結(jié)合后臺(tái)選擇器和子選擇器

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

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

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

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

第一個(gè)段落
標(biāo)題

第二個(gè)段落

第二個(gè)段落

總結(jié)：

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

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

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

錨偽類

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

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

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

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

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

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

  
  
These are the necessary steps:
    

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

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

偽類匯總

偽元素

偽元素可用于定位文檔中包含的文本，為與偽類進(jìn)行區(qū)分，偽元素使用雙冒號(hào) :: 定義，但單冒號(hào) : 也能被識(shí)別。

W3School CSS 選擇器

CSS選擇器詳解

十分鐘搞定CSS選擇器