CSS選擇器和優(yōu)先級(jí)總結(jié)，告誡自己不能任性使用！important
如果在項(xiàng)目里面使用了通用的reset.css樣式，但是在具體的頁(yè)面里面要對(duì)同一個(gè)樣式進(jìn)行覆蓋式修改，不借助與scoped的和inner style，你會(huì)怎么做？會(huì)不會(huì)像我一樣在剛接觸的時(shí)候給要覆蓋的樣式后面加上!important屬性
本文將告訴大家關(guān)于CSS選擇器和優(yōu)先級(jí)總結(jié)，同時(shí)告誡大家不能任性使用!important。
舉個(gè)詳細(xì)點(diǎn)例子，下面這段代碼輸出的樣式是什么樣的？以及為什么是你說(shuō)說(shuō)的答案？
CSS三大特性—— 繼承、 優(yōu)先級(jí)和層疊。
繼承：即子類(lèi)元素繼承父類(lèi)的樣式;
優(yōu)先級(jí)：是指不同類(lèi)別樣式的權(quán)重比較;
層疊：是說(shuō)當(dāng)數(shù)量相同時(shí)，通過(guò)層疊(后者覆蓋前者)的樣式。
CSS選擇符分類(lèi)
首先來(lái)看一下css選擇符(css選擇器)有哪些?
1.標(biāo)簽選擇器(如：body,div,p,ul,li)
2.類(lèi)選擇器(如：class="head",class="head_logo")
3.ID選擇器(如：id="name",id="name_txt")
4.全局選擇器(如：*號(hào))
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開(kāi))
6.后代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標(biāo)簽分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開(kāi))
9.偽類(lèi)選擇器(如：就是鏈接樣式,a元素的偽類(lèi)，4種不同的狀態(tài)：link、visited、active、hover。)
10.字符串匹配的屬性選擇符(^ $ *三種，分別對(duì)應(yīng)開(kāi)始、結(jié)尾、包含)
11.子選擇器 (如：div>p ,帶大于號(hào)>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號(hào)+)
CSS優(yōu)先級(jí)
當(dāng)兩個(gè)規(guī)則都作用到了同一個(gè)html元素上時(shí)，如果定義的屬性有沖突，那么應(yīng)該用誰(shuí)的值的，CSS有一套優(yōu)先級(jí)的定義。
不同級(jí)別
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
- 作為style屬性寫(xiě)在元素內(nèi)的樣式
- id選擇器
- 類(lèi)選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義或繼承
總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
同一級(jí)別
同一級(jí)別中后寫(xiě)的會(huì)覆蓋先寫(xiě)的樣式
上面的級(jí)別還是很容易看懂的，但是有時(shí)候有些規(guī)則是多個(gè)級(jí)別的組合，像這樣
CSS優(yōu)先級(jí)：是由四個(gè)級(jí)別和各級(jí)別的出現(xiàn)次數(shù)決定的。
四個(gè)級(jí)別分別為：
- 行內(nèi)選擇符
- ID選擇符
- 類(lèi)別選擇符
- 元素選擇符
優(yōu)先級(jí)的算法：
- 每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：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í)越高。
為了更好的理解這些計(jì)算規(guī)則，舉些例子如下：
選擇器的解析原則
以前一直認(rèn)為選擇器的定位DOM元素是從左向右的方向，查看了網(wǎng)上的相關(guān)資料之后才發(fā)現(xiàn)原來(lái)自己一直都是錯(cuò)的。鄭重的聲明選擇器定位DOM元素是從右往左的方向，這樣的好處是盡早的過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素 。
簡(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)系
5. 保持CSS的可讀性
