一、CSS選擇器

CSS中選擇器是一種模式，用于選擇需要添加樣式的元素。

選擇器的基本結構如下

x {
    background: red;
}

其中，x是選擇器可以是類，ID，元素類型等等，下面會具體探討，后面的花括號為聲明塊，對元素樣式的聲明都包含在其中，每一個屬性聲明用分號;隔開。

二、CSS選擇器類別

CSS中選擇器主要分為以下幾種：

1. 標簽選擇器
2. ID選擇器
3. 類選擇器
4. 通用選擇器
5. 組合選擇器
6. 繼承選擇器
7. 偽類選擇器
8. 屬性選擇器

基本的選擇器此處不做贅述，只寫幾個特殊的。

2.1 后代選擇器

.class_name div {
    background: red;
}

這里為類名為.class_name的元素包含的所有后代div元素設定樣式，且只針對其后代不影響同級或更高級以及其后代div元素。如果我們將下面代碼制定這樣的CSS樣式的話，會發現這里面的子級div和孫級div都會被設置為紅色背景。

<div class=".class_name">
    <div class="">
        <div class="">
        </div>
    </div>
</div>

有時候并不需要將所有的后代元素都設置同一個樣式，比如上面這段，我只想將子級div設置為紅色背景，而孫級div并不想套用這樣的樣式，顯然，后代選擇器不適應與這種情況，這里可以使用子元素選擇器。

.class_name > div {
    background: red;
}

如上所示，子元素選擇器比后代選擇器多了一個大于號>，表示直接做用于子元素，不會應用的子級以后的元素。如果將上面的那段HTML應用這個CSS樣式的話，只用第二層的div元素被設置為紅色，而最里面的div元素不會套用這種樣式。

2.2 偽類選擇器

偽類選擇器很有意思，利用它可以為HTML文檔中一些也許存在，也許不存在的元素結構指定樣式。它不像其他選擇器利用元素類型、ID或者class等來為元素指定樣式，而是用條件選擇來指定。具體屬性看下表：

以上是常用的偽類選擇器，具體說明在表中不再贅述。

2.3 屬性選擇器

屬性選擇器是經常用到的選擇器，應用范圍寬泛，也非常實用。下面用一個表格列出。

選擇器暫且介紹這么多，基礎的選擇器想必早已爛熟于心，就不贅述了。

三、優先級與權重

設想一種情況：
一個div長這個樣子

<div class=".class_name">

</div>

嗯，只是一個簡單的不能再簡單的div，再來一個CSS

.class_name {background: red;}
div {background: green;}
* {background: yellow;}

這有點腦殼疼了，一下給那么多選擇器設置樣式，到底會變成什么背景色呢？這里引出一個選擇器特殊性的概念，元素會根據選擇性的特殊性來決定所應用樣式的次序，特殊性更高的規則樣式將會被優先運用。

選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4各部分：0,0,0,0。可以看做是一個四位數，一個初始情況下等于0的四位數，具體特殊性規則如下：

• 對于內聯樣式的聲明，其權重為1000
• 對于ID選擇器，其權重為100
• 對于類選擇器、屬性選擇、偽類選擇，其權重為10
• 對于類型選擇器、為元素，其權重為1
• 結合符、通配符沒有特殊性貢獻

下面給出幾個簡單的例子：

#id {background: red;}  //0,1,0,0
.class_name {background: green;}  //0,0,1,0
* {background: yellow;}  //0,0,0,0
.class_name #id {color:blue;}  //0,1,1,0
p em {background: yellow;}  //0,0,0,2
div#id *[href] {background: yellow;}  //0,1,1,1

需要注明的是，有時候我們需要一個元素權重特別大，大到任何選擇器都無法影響的地步。重要聲明可以滿足要求，它長這樣：!important，形象一點說!important的權重約等于無窮。下面是它的用法

.class_name {
    background: red !important;
    }

在一條聲明的后面，分號前插入一個!impotant即可，如果有多條聲明需要重要，那么每一條都要寫。