一、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
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)