CSS選擇器與選擇器權重
一、CSS選擇器
1、什麼是選擇器
每一條CSS樣式宣告由兩部分組成，選擇器{樣式}
在{}之前的就是選擇器，選擇器指明瞭{}中樣式的作用物件，也就是樣式作用於網頁中哪些元素
2.選擇器的分類
（1）、標籤選擇器
標籤選擇器就是HTML中的標籤，如<body>, <h1>, < p>,<img>等
例如：
p{color:red;line-height:30px;}（2）、類選擇器
之所以存在類選擇器就是給標籤起了一個類名，從而可以用這個類名來進行CSS樣式宣告,記住類名不能是中文
例如：
<p class="flag"> 這是一個類標籤</p>
於是，CSS宣告如下;
.flag{color:yellow;margin;0 auto;}（3）、id選擇器
在很多地方。id選擇器類似於類選擇器，但是也有一些重要的區別：
1.為標籤設定id=“id名稱“ 而不是class=“類名”
2.id選擇符前面是#不是英文圓點
3.id選擇器在文件中只能使用一次，而類選擇器可以多次使用
例如：
定義id選擇器：
<p id="ex1">這是一個id選擇器。</p>使用id選擇器：
#ex1 {padding:1cm;color: red;}
（4）、子選擇器
子選擇器會選擇到父標籤下的所有同級且名稱相同的標籤，並將樣式作用於被選擇的標籤中，在此一定要區分好父標籤下的所有同級且名稱相同的標籤，就好像你爺爺有3個兒子，6個孫子，爺爺把遺傳特徵全部遺傳給了兒子，而沒有遺傳給孫子，所以爺爺的遺傳作用只會作用於兒子，孫子不受影響（這裡只是一個比喻）
例如：
<父標籤>
<兒子1>這是兒子標籤1<兒子1>
<兒子2>這是兒子標籤2
<孫子1>這是孫子標籤1<孫子1>
<兒子2>
<別人家兒子1>這是別人家的兒子標籤1<別人家兒子1>
</父標籤>
自己家的兒子會繼承父標籤的樣式，別人家的兒子不會繼承，這就是說，在使用子選擇器的時候，只要指定了子標籤的名字（>後面的標籤名），在父標籤裡面所有同級的且名字相同的子標籤都會被指定的樣式所作用，而其他的標籤則不會被作用，並且其他標籤中如果存在相同名字的標籤，也不會被作用。這就是子選擇器的作用。
（5）、後代選擇器
根據上面對子選擇器的解釋，name後代選擇器就是不管自己家的兒子還是別人家的兒子，只要是存在於同一個父標籤中，且名字為指定的後代名的標籤，都會被相同樣式作用，這就是後代選擇器的強大之處！
（6）通用選擇器
通用選擇器是功能最強大的選擇器，它使用*來將HTML中所有的標籤全部選中，然後將樣式作用於所有標籤中。
（7）分組選擇器
當你向把多個標籤中的內容樣式設定為統一樣式的時候，分組選擇器是最佳選擇
如：div,p,.flag{樣式}
（8）偽類選擇符
偽類選擇符號可以給HTML中不存在的標籤設定樣式，可以設定滑鼠滑過的樣式，點選時候的樣式等
例如：
a：hover{color:red;]
當滑鼠滑過a標籤時，文字就會變成紅色
二、選擇器的優先順序及權重及計算
1.優先順序分類
通常可以將css的優先順序由高到低分為6組：
- 第一優先順序：無條件優先的屬性只需要在屬性後面使用！important。它會覆蓋頁面內任何位置定義的元素樣式。ie6不支援該屬性。
- 第二優先順序：在html中給元素標籤加style，即內聯樣式。該方法會造成css難以管理，所以不推薦使用。
- 第三優先順序：由一個或多個id選擇器來定義。例如，#id{margin:0;}會覆蓋.classname{margin:3pxl}
- 第四優先順序：由一個或多個類選擇器、屬性選擇器、偽類選擇器定義。如.classname{margin:3px}會覆蓋div{margin:6px;}
- 第五優先順序：由一個或多個型別選擇器定義。如div{marigin:6px;}覆蓋*{margin:10px；}
- 第六優先順序：通配選擇器，如*{marigin:6px;}
2.選擇器權重
我們把特殊性分為4個等級，每一個等級代表一類選擇器，沒個等級的值相加得出選擇器的權重。
4個等級的定義如下：
- 第一等級：代表內聯樣式，如style=""，權值為 1000
- 第二等級：代表id選擇器，如#content，權值為100
- 第三等級：代表類，偽類和屬性選擇器，如.content，權值為10
- 第四等級：代表標籤選擇器和偽元素選擇器，如div p，權值為1
注意：通用選擇器（*），子選擇器（>），和相鄰同胞選擇器（+）並不在這個等級中，所以他們的權值為0