CSS三大特性——繼承述吸、 優(yōu)先級和層疊忿族。
繼承：即子類元素繼承父類的樣式;
優(yōu)先級：是指不同類別樣式的權(quán)重比較;
層疊：是說當數(shù)量相同時，通過層疊(后者覆蓋前者)的樣式蝌矛。
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種不同的狀態(tài)：link、visited朴读、active屹徘、hover。)
10.字符串匹配的屬性選擇符(^ $ *三種衅金，分別對應(yīng)開始噪伊、結(jié)尾、包含)
11.子選擇器 (如：div>p ,帶大于號>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)
css優(yōu)先級
當兩個規(guī)則都作用到了同一個html元素上時氮唯，如果定義的屬性有沖突鉴吹，那么應(yīng)該用誰的值的，CSS有一套優(yōu)先級的定義惩琉。
不同級別
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式豆励。
作為style屬性寫在元素內(nèi)的樣式
id選擇器
類選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義或繼承
? ? ? 總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
同一級別
同一級別中后寫的會覆蓋先寫的樣式
上面的級別還是很容易看懂的，但是有時候有些規(guī)則是多個級別的組合，像這樣
div.test{
? ? ? ? ? ? background-COLOR:#a00;
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
.test.test2{
? ? ? ? ? ? background-COLOR:#0e0;
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
Document? ? ? ?
div.test{?? background-COLOR:#a00;?? width:100px;? ? height: 100px;}? ? ? ?
.test.test2{? ? background-COLOR:#0e0;? ? width:100px;? ?? height: 100px;}? ??
到底div是應(yīng)用那條規(guī)則呢良蒸，有個簡單的計算方法（權(quán)值實際并不是按十進制技扼，用數(shù)字表示只是說明思想，一萬個class也不如一個id權(quán)值高）
內(nèi)聯(lián)樣式表的權(quán)值為 1000
ID 選擇器的權(quán)值為 100
Class 類選擇器的權(quán)值為 10
HTML 標簽選擇器的權(quán)值為 1
?我們可以把選擇器中規(guī)則對應(yīng)做加法嫩痰，比較權(quán)值剿吻，如果權(quán)值相同那就后面的覆蓋前面的了，div.class的權(quán)值是1+10=11串纺，而.test1 .test2的權(quán)值是10+10=20丽旅，所以div會應(yīng)用.test1 .test2變成綠色
另外一種理解方式：
CSS優(yōu)先級：是由四個級別和各級別的出現(xiàn)次數(shù)決定的。
四個級別分別為：行內(nèi)選擇符纺棺、ID選擇符榄笙、類別選擇符、元素選擇符祷蝌。
優(yōu)先級的算法：
每個規(guī)則對應(yīng)一個初始"四位數(shù)"：0茅撞、0、0杆逗、0
若是 行內(nèi)選擇符乡翅，則加1、0罪郊、0蠕蚜、0
若是 ID選擇符，則加0悔橄、1靶累、0、0
若是 類選擇符/屬性選擇符/偽類選擇符癣疟，則分別加0挣柬、0、1睛挚、0
若是 元素選擇符/偽元素選擇符邪蛔，則分別加0、0扎狱、0侧到、1
算法：將每條規(guī)則中，選擇符對應(yīng)的數(shù)相加后得到的”四位數(shù)“淤击，從左到右進行比較匠抗，大的優(yōu)先級越高。
需注意的：
①污抬、!important的優(yōu)先級是最高的汞贸，但出現(xiàn)沖突時則需比較”四位數(shù)“;
②、優(yōu)先級相同時，則采用就近原則矢腻，選擇最后出現(xiàn)的樣式;
③门驾、繼承得來的屬性，其優(yōu)先級最低;
!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
*css選擇器使用強烈建議采用低權(quán)重原則踏堡，利于充分發(fā)揮css的繼承性猎唁，復(fù)用性，模塊化顷蟆、組件化。
CSS選擇器的解析原則
? ? ? ? ?以前一直認為選擇器的定位DOM元素是從左向右的方向腐魂，查看了網(wǎng)上的相關(guān)資料之后才發(fā)現(xiàn)原來自己一直都是錯的帐偎。鄭重的聲明選擇器定位DOM元素是從右往左的方向，這樣的好處是盡早的過濾掉一些無關(guān)的樣式規(guī)則和元素 蛔屹。
簡潔削樊、高效的css
? ? ? ? 所謂高效就是讓瀏覽器查找更少的元素標簽來確定匹配的style元素。
? ? ? 1.不要再ID選擇器前使用標簽名
? ? ? ? 解釋：ID選擇是唯一的兔毒，加上標簽名相當于畫蛇添足了漫贞，沒必要。
????? 2.不要在類選擇器前使用標簽名
? ? ? 解釋：如果沒有相同的名字出現(xiàn)就是沒必要育叁，但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
??????3.盡量少使用層級關(guān)系迅脐；
? ? ? ? ?#divclass p.colclass{color:red;}改為 ?.colclass{color:red;}
??????4.使用類選擇器代替層級關(guān)系（如上）?
