CSS選擇器、優(yōu)先級與匹配原理
成都創(chuàng)新互聯(lián)是一家專業(yè)提供羅定企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設、成都h5網(wǎng)站建設、小程序制作等業(yè)務。10年已為羅定眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。
1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul li）6.后代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.偽類選擇器（a:hover,li:nth-child）
其中ID選擇器的效率是最高，而偽類選擇器的效率則是最低
CSS的權重
1. 通配選擇符的權值 0,0,0,0
2. 標簽的權值為 0,0,0,1
3. 類的權值為 0,0,1,0
4. 屬性選擇的權值為 0,0,1,0
5. 偽類選擇的權值為 0,0,1,0
6. 偽對象選擇的權值為 0,0,0,1
7. ID的權值為 0,1,0,0
8. important的權值為最高 1,0,0,0
使用規(guī)則： 選擇器的權值加到一起，大的優(yōu)先；如果權值相同，后定義的優(yōu)先 。
從上面我們可以得出兩個關鍵的因素：
1. 權值的大小跟選擇器的類型和數(shù)量有關
2. 樣式的優(yōu)先級跟樣式的定義順序有關
CSS選擇器的權重與優(yōu)先規(guī)則
我們在使用CSS對網(wǎng)頁元素定義樣式時經(jīng)常會遇到這種情況：要對一般元素應用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們怎么樣來保證我們所新定義的元素樣式能覆蓋目標元素上原有的樣式呢？
在CSS中，會根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。
那么，又怎么來計算選擇器的特殊性呢？下面這張圖介紹了特殊性的計算方法：
我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數(shù)乘以這一等級的權值，最后把所有等級的值相加得出選擇器的特殊值。
4個等級的定義如下：
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
例如上圖為例，其中#NAV為二等選擇器，.ACTIVE為三等選擇器，UL、LI和A為四等選擇器。則整個選擇器表達式的特殊性的值為1*100+1*10+3*1=113
下面是一些計算示例：
注意：通用選擇器（*），子選擇器（）和相鄰同胞選擇器（+）并不在這四個等級中，所以他們的權值都為0。
理解選擇器的特殊性很重要，特別是在修復bug的時候，因為你需要了解哪些規(guī)則優(yōu)先及其原因。
如果你遇到了似乎沒有起作用的CSS規(guī)則，很可能是出現(xiàn)了特殊性沖突。請在你的選擇器中添加他的一個父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規(guī)則，它覆蓋了你的規(guī)則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡潔。
1、代表內(nèi)聯(lián)樣式，如: style=””，權值為1000。
2、代表ID選擇器，如：#content，權值為100。
3、代表類，偽類和屬性選擇器，如.content，權值為10。
4、代表類型(元素)選擇器和偽元素選擇器，如div p，權值為1。
按照CSS代碼的執(zhí)行先后順序。如果有重復的規(guī)則，按照后執(zhí)行的定義。最終規(guī)則是多個定義規(guī)則的綜合。重點：高級規(guī)則定義對于不同表格的文字樣式定義。(不同表格使用不同ID、使用類樣式定義)一頁中的多種超級鏈接樣式定義。多個相同規(guī)則不同對象的CSS共同定義。對于同一對象定義的多種CSS方式考慮哪種更科學。
正常情況下是就近原則，css從上直下，如果相同會采用最后的css，如果是css3就要看情況了。
比如：如果設置了【：first-child或者：last-child，：nth-child()】等這種選擇器，會采用選擇器的css；如果設置了【！important】會采用有這個的css，就算是寫在div里面的也沒有這個級別高（但不是萬能的，有的可以設置有的不行，列出來太多了，記著也麻煩，最簡單的記憶方式就是寫完在瀏覽器中F12，如果劃橫線就是不好使）
width：10px ！important；意思是設置成最高級別，不管先后都會采用這個css，如果有兩個這種代碼會采用最后一個。
以下是優(yōu)先級設置順序：
1、width：10px；
2、width：10px ！important；
3、：first-child{width：10px；}
4、：first-child{width：10px ！important；}
優(yōu)先級順序為4231，如果是同級別情況下會就近選擇，就是選擇最后一個
1. 內(nèi)聯(lián)樣式表的權值最高 1000
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
CSS 優(yōu)先級法則：
A 選擇器都有一個權值，權值越大越優(yōu)先
B 當權值相等時，后出現(xiàn)的樣式表設置要優(yōu)于先出現(xiàn)的樣式表設置
C 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設置的CSS 樣式的優(yōu)先權高于瀏覽器所設置的樣式
D 繼承的CSS 樣式不如后來指定的CSS 樣式
E 在同一組屬性設置中標有“!important”規(guī)則的優(yōu)先級最大
這是規(guī)定好的,自然不能打破
重慶分公司
重慶分公司
