CSS三大特性—— 繼承、 優(yōu)先級(jí)和層疊。
繼承：即子類(lèi)元素繼承父類(lèi)的樣式;
優(yōu)先級(jí)：是指不同類(lèi)別樣式的權(quán)重比較;
層疊：是說(shuō)當(dāng)數(shù)量相同時(shí)，通過(guò)層疊(后者覆蓋前者)的樣式。
1.CSS選擇器分類(lèi)
- 全局選擇器（通配符*）
- 標(biāo)簽選擇器（body，div，p，ul，li）
- 類(lèi)選擇器（.）
- ID選擇器（#）
- 組合選擇器（.head .head_loge，兩選擇器之間用空格隔開(kāi)）
- 后代選擇器（#head .nav li ul，從父級(jí)到子孫集的選擇器）
- 子選擇器（div>p）
- 群組選擇器（div，span，img{color：red；}，即將具有相同樣式的標(biāo)簽分組顯示）
- 繼承選擇器（div p，兩選擇器用空格鍵分開(kāi)）
- 偽類(lèi)選擇器（鏈接樣式a元素的偽類(lèi)：:link(未被訪(fǎng)問(wèn))，:visited(已訪(fǎng)問(wèn))，:active(被選擇)，:hover(當(dāng)鼠標(biāo)懸停在鏈接上)）
- 字符串匹配的屬性選擇符（^(開(kāi)始)，$(中間)，*(結(jié)尾)）
- css相鄰兄弟選擇器（如h1+p）
2.CSS選擇器優(yōu)先級(jí)
不同級(jí)別：！important（在樣式屬性后不加“;”，在!important后加分號(hào)）>行內(nèi)樣式>ID選擇器>Class選擇器>標(biāo)簽>通配符
相同級(jí)別：
（1）同一級(jí)別中后寫(xiě)的會(huì)覆蓋先寫(xiě)的樣式
（2）選擇器約分
**CSS優(yōu)先級(jí)：是由四個(gè)級(jí)別和各級(jí)別出現(xiàn)次數(shù)決定的
四個(gè)級(jí)別：行內(nèi)樣式，ID選擇器，Class選擇器，標(biāo)簽
每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始值0,0,0,0
若是 行內(nèi)選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類(lèi)選擇符/屬性選擇符/偽類(lèi)選擇符，則分別加0、0、1、0
若是 元素選擇符/偽元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的”四位數(shù)“，從左到右進(jìn)行比較，大的優(yōu)先級(jí)越高。**
注意：
①、!important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較”四位數(shù)“;
②、優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式;
③、繼承得來(lái)的屬性，其優(yōu)先級(jí)最低;
!important > 行內(nèi)樣式>ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
css選擇器使用強(qiáng)烈建議采用低權(quán)重原則，利于充分發(fā)揮css的繼承性，復(fù)用性，模塊化、組件化。
3.CSS 選擇器解析原則
從右向左進(jìn)行解析，切記?。。∧軌驕p少節(jié)點(diǎn)的便利。
如果從左到右一層一層的篩選：首先會(huì)看到很多div被篩選出來(lái)，接下來(lái)篩選每一個(gè)div，首先在#div2中看到了class=p1的p，此時(shí)我們很是高興，感覺(jué)勝利就在前方了，再看class=p1的p標(biāo)簽的子元素，看到第一個(gè)很是失望，不符合span.red，不要急，再看下一個(gè)又不符合規(guī)則，小小的安慰自己一下，最后一個(gè)含有class，說(shuō)不定就是了，結(jié)果，結(jié)果居然class=green，此時(shí)火冒三丈，就差最后一層，怎奈居然出現(xiàn)這種事，無(wú)奈之下只能在返回#div2繼續(xù)匹配它的子元素....
但如果我們換一個(gè)思路，首先匹配class=red 的 span，我們找到2個(gè)符合條件的的span然后在和上一次比對(duì)，我們需要的是span.red 是 p.p1的下屬元素，此時(shí)就發(fā)現(xiàn)剛才篩選出來(lái)的第二個(gè) span 元素不符合要求，再來(lái)匹配第一個(gè)，層層向上匹配，最終匹配成功。
4.簡(jiǎn)潔，高效的CSS
所謂高效就是讓瀏覽器查找更少的元素標(biāo)簽來(lái)確定匹配的style元素。
1.不要再I(mǎi)D選擇器前使用標(biāo)簽名
解釋?zhuān)篒D選擇是唯一的，加上標(biāo)簽名相當(dāng)于畫(huà)蛇添足了，沒(méi)必要。
2.不要在類(lèi)選擇器前使用標(biāo)簽名
解釋?zhuān)喝绻麤](méi)有相同的名字出現(xiàn)就是沒(méi)必要，但是如果存在多個(gè)相同名字的類(lèi)選擇器則有必要添加標(biāo)簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.盡量少使用層級(jí)關(guān)系；
#divclass p.colclass{color:red;}改為 .colclass{color:red;}
4.使用類(lèi)選擇器代替層級(jí)關(guān)系（如上）
