本文內容： 層疊性 繼承性 優先順序 權重計算方法（特異性） 首發日期：2018-05-01 層疊性： 層疊性是指當一個標簽被設置了多個重覆的樣式的時候，一個屬性會覆蓋另外一個屬性。 比如：先給div設置背景顏色為紅色，然後設置背景顏色為粉紅色，那麼最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設... ...
本文內容：
- 層疊性
- 繼承性
- 優先順序
- 權重計算方法（特異性）
首發日期：2018-05-01
層疊性：
- 層疊性是指當一個標簽被設置了多個重覆的樣式的時候，一個屬性會覆蓋另外一個屬性。
- 比如：先給div設置背景顏色為紅色，然後設置背景顏色為粉紅色，那麼最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設置不能並立，所以只為其一，這裡沒給出確定答案是因為還要考慮“優先順序”）
層疊性主要遵循的原則是就近原則，在不考慮優先順序的情況下，在多個樣式中最終生效的樣式是離標簽最近的樣式。【這裡要註意只覆蓋同樣的不可重覆的樣式屬性，不會覆蓋不重覆的屬性，不重覆的屬性會合併下來（包括那些允許設置多個值的屬性也會合併，比如text-shadow）。】
示例：
依據層疊性的就近原則，第一個div的背景色為藍色，第二個div的背景色為綠色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ background-color: red; } div{ background-color: blue; } </style> </head> <body> <div>123</div> <!-- 最終背景顏色是藍色 --> <div style="background-color: green;">123</div> <!-- 最終背景顏色是綠色 --> </body> </html>
繼承性：
- 繼承性是指當子標簽沒有設置樣式時，會繼承父標簽的樣式。
- 比如一個子標簽沒有設置背景顏色，那麼子標簽會繼承父標簽的背景顏色。
可繼承的屬性比如有字體類屬性（字體顏色、字體大小之類的）、文本類屬性（行高之類的）、背景類屬性（背景顏色之類的）（要註意子標簽不會繼承父標簽的寬度、高度、邊距屬性。）
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ font-size:70px; background-color: #CCC; color:skyblue; } </style> </head> <body> <div> <p>p繼承div的樣式</p> </div> </body> </html>
優先順序：
- 優先順序：!important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承 【優先順序高的規則會忽視層疊性，忽視就近原則來定義樣式。比如定義了!important，即使行內樣式離得近，最終生效的還是!important標註的屬性】
- !important是css的一種語法，定義在樣式屬性後面，代表這個屬性不會被覆蓋，最終生效的屬性一定是!important標註的屬性。
示例：
下麵的代碼可以從上到下，依次註釋選擇器來測試優先順序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> /* 從上到下，依次註釋選擇器來測試優先順序 */ div{ color:green!important; } #id1{ color:red; } .class{ color: blue; } div{ color:purple; } </style> </head> <body> <div>!import優先順序</div> <div style="color:red">行內樣式優先順序</div> <div id="id1">id選擇器優先順序</div> <div class="c1">類選擇器優先順序</div> <div>標簽選擇器優先順序</div> </body> </html>
上面的規則!important和行內樣式毫無疑問，但如果多個選擇器混雜來定義樣式的時候如何判斷他們的優先順序？答案是依據權重來判斷。
權重計算方法【可以稱為是css的特異性】：
- 幾個規則：
- 權重使用四個數字來衡量(x,x,x,x)【CSS2使用三位】
- 繼承的權重為(0,0,0,0)
- 標簽選擇器的權重為(0,0,0,1)
- 類、偽類選擇器的權重為(0,0,1,0)
- id選擇器選擇器的權重為(0,1,0,0)
- 行內樣式的權重為(1,0,0,0)
- !important的權重無限大
- 計算方法：
- 多個選擇器混雜時，權重之和也是用四個數字來組成，每一位的值為多個選擇器四個數字的每位之和，比如div:first-child的權重為(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 為(0,0,0,3),比如a:hover為(0,0,1,1)
- 權重之和的數制是不會進位的，再多的標簽選擇器權重加和也抵不過一個類選擇器。
- 多個選擇器之間的順序是無關的，不影響權重之和。
- 註意：對於並集選擇器來說不是權重的加和，因為理論上它還是獨立的，它只相當於將多個選擇器的相同內容歸於一個並集選擇器中，理論上每一個選擇器還是獨立的。
示例：
權重相同時，考慮就近原則：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div .p1{ background-color:blue; } p.p1{ background-color:green; } </style> </head> <body> <div> <p class="p1">123</p> <!-- 最終顏色為綠色 --> </div> </body> </html>
權重不同時，權重大的生效：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> p.p1:first-child{ background-color:green; } div .p1{ background-color:blue; } </style> </head> <body> <div> <p class="p1">123</p> <!-- 最終顏色為綠色 --> </div> </body> </html>
