選擇器

css有三大特性：繼承，優先順序，層疊
繼承：即子元素可以繼承父元素的樣式
優先順序：指不同類別樣式的權重比較
層疊：指當數量相同時，通過層疊（後者覆蓋前者）的樣式
首先，我們來看一下css選擇器都有哪些：

1.標籤選擇器（div，p，ul）
2.類選擇器（class="logo"）
3.ID選擇器（id="btn"）
4.全域性選擇器（*）
5.組合選擇器(如：.div .btn,注意兩選擇器用空格鍵分開)
6.後代選擇器 (如：#header .nav ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標籤分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.偽類選擇器(如：就是連結樣式,a元素的偽類，4種不同的狀態：link（預設）、visited（已訪問的）、active（滑鼠按下）、hover（滑鼠懸停處）。)
10.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
11.子選擇器 (如：div>p ,帶大於號>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)

css優先順序
當兩個規則都作用到了同一個HTML元素上，如果定義的屬性有衝突，那麼應該用誰的值呢？

不同級別：

1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標籤選擇器
6.萬用字元選擇器
7.瀏覽器自定義或繼承
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

同一級別

在同一級別中，到底div是應用那條規則呢，我們可以用權值來計算，權值實際並不是按十進位制，用數字表示只是說明思想，一萬個class也不如一個id權值高。

內聯樣式表的權值為 1000
ID 選擇器的權值為 100
Class 類選擇器的權值為 10
HTML 標籤選擇器的權值為 1

我們可以把選擇器中規則對應做加法，比較權值，如果權值相同那就後面的覆蓋前面的了.
css選擇器使用強烈建議採用低權重原則，利於充分發揮css的繼承性，複用性，模組化、元件化。

簡潔、高效的css

所謂高效就是讓瀏覽器查詢更少的元素標籤來確定匹配的style元素。
1.不要再ID選擇器前使用標籤名
解釋：ID選擇是唯一的，加上標籤名相當於畫蛇添足了，沒必要。
2.不要在類選擇器前使用標籤名
解釋：如果沒有相同的名字出現就是沒必要，但是如果存在多個相同名字的類選擇器則有必要新增標籤名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.儘量少使用層級關係；
4.使用類選擇器代替層級關係