繼承：即子類元素繼承父類的樣式;
優先級：是指不同類别樣式的權重比較;
層疊：是說當數量相同時，通過層疊(後者覆寫前者)的樣式。
css選擇符分類
首先來看一下css選擇符(css選擇器)有哪些?
1.标簽選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class="head",class="head_logo")
3.ID選擇器(如：id="name",id="name_txt")
4.全局選擇器(如：*号)
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.後代選擇器 (如：#head .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元素上時，如果定義的屬性有沖突，那麼應該用誰的值的，CSS有一套優先級的定義。
不同級别
- 在屬性後面使用 !important 會覆寫頁面内任何位置定義的元素樣式。
- 作為style屬性寫在元素内的樣式
- id選擇器
- 類選擇器
- 标簽選擇器
- 通配符選擇器
- 浏覽器自定義或繼承
總結排序：!important > 行内樣式>ID選擇器 > 類選擇器 > 标簽 > 通配符 > 繼承 > 浏覽器預設屬性
同一級别
同一級别中後寫的會覆寫先寫的樣式
上面的級别還是很容易看懂的，但是有時候有些規則是多個級别的組合，像這樣
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.test{
background-COLOR:#a00;
width:100px;
height: 100px;
}
.test.test2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test test2"></div>
</body>
</html> 到底div是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際并不是按十進制，用數字表示隻是說明思想，一萬個class也不如一個id權值高）
- 内聯樣式表的權值為 1000
- ID 選擇器的權值為 100
- Class 類選擇器的權值為 10
- HTML 标簽選擇器的權值為 1
我們可以把選擇器中規則對應做加法，比較權值，如果權值相同那就後面的覆寫前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，是以div會應用.test1 .test2變成綠色
另外一種了解方式：
CSS優先級：是由四個級别和各級别的出現次數決定的。
四個級别分别為：行内選擇符、ID選擇符、類别選擇符、元素選擇符。
優先級的算法：
每個規則對應一個初始"四位數"：0、0、0、0
若是 行内選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類選擇符/屬性選擇符/僞類選擇符，則分别加0、0、1、0
若是 元素選擇符/僞元素選擇符，則分别加0、0、0、1
算法：将每條規則中，選擇符對應的數相加後得到的”四位數“，從左到右進行比較，大的優先級越高。
需注意的：
①、!important的優先級是最高的，但出現沖突時則需比較”四位數“;
②、優先級相同時，則采用就近原則，選擇最後出現的樣式;
③、繼承得來的屬性，其優先級最低;
!important > 行内樣式>ID選擇器 > 類選擇器 > 标簽 > 通配符 > 繼承 > 浏覽器預設屬性
*css選擇器使用強烈建議采用低權重原則，利于充分發揮css的繼承性，複用性，子產品化、元件化。
CSS選擇器的解析原則
以前一直認為選擇器的定位DOM元素是從左向右的方向，檢視了網上的相關資料之後才發現原來自己一直都是錯的。鄭重的聲明選擇器定位DOM元素是從右往左的方向，這樣的好處是盡早的過濾掉一些無關的樣式規則和元素 。為什麼CSS選擇器是從右往左解析 ？？？
簡潔、高效的css
所謂高效就是讓浏覽器查找更少的元素标簽來确定比對的style元素。
1.不要再ID選擇器前使用标簽名
解釋：ID選擇是唯一的，加上标簽名相當于畫蛇添足了，沒必要。
2.不要在類選擇器前使用标簽名
解釋：如果沒有相同的名字出現就是沒必要，但是如果存在多個相同名字的類選擇器則有必要添加标簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.盡量少使用層級關系；
#divclass p.colclass{color:red;}改為 .colclass{color:red;}
4.使用類選擇器代替層級關系（如上）