CSS 特殊性、继承与层叠
一、特殊性規則
選擇器的特殊性由選擇器本身的組件確定；特殊性由四個部分組成，其初始值為0，0，0，0。
1. ? ?對于選擇器中的每一個id，記0，1，0，0；
2. ? ?對于選擇器中的每一個類、偽類、屬性，記0，0，1，0；
3. ? ?對于選擇器中的每一個元素、偽元素，記0，0，0，1；
4. ? ?結合符與通配符對于選擇器的特殊性沒有任何貢獻。
?
注意：
1. ? ?0，0，1，0的特殊性比0，0，0，13的特殊性更高。
2. ? ?通配符 * 的特殊性為0，0，0，0，它是有特殊性的；結合符（比如h1+p中的“+”）根本沒有特殊性；繼承而來的樣式也沒有特殊性。
請看如下代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 * { 8 color:red; 9 } 10 11 body { 12 color:cyan; 13 } 14 </style> 15 </head> 16 <body> 17 <p>What kind of color this para will be?</p> 18 </body> 19 </html> View Code頁面顯示如下：
此例中，<p>元素從<body>元素中繼承了cyan顏色，然而繼承來的規則根本沒有特殊性，其優先級低于 * 的0特殊性，所以<p>元素采用了 * 的規則，顏色為red。
關于通配符 * ：由于 * 適用于所有元素，而且有0特殊性，往往會在不經意間造成繼承無法實現的情況，應該盡量避免使用 * 選擇器。
?
3. ? ?指定id屬性的屬性選擇器與id選擇器有本質區別，比如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 div[id="test"] p { 8 color:red; 9 } 10 11 #test p { 12 color:cyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="test"> 18 <p>What kind of color this para will be?</p> 19 </div> 20 </body> 21 </html> View Code頁面效果：
此例中，div[id="test"] p?的特殊性為0，0，1，2；而?#test p 的特殊性為0，1，0，1；#test p 這個選擇器勝出，所以字體顏色為cyan。
?
4. ? ?行內樣式的特殊性最高，為1，0，0，0。
5. ? ?標記為!important的聲明被稱為重要聲明，它沒有特殊性，不過要與非重要聲明分開考慮。
具體而言：非重要聲明分為一組，它們之間的沖突使用特殊性解決；重要聲明分為一組，它們之間的沖突內部解決；重要聲明總是比非重要聲明優先。
?
二、繼承
1. ? ?繼承沒有任何特殊性，記住這一點往往能明白很多問題。
請看如下代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 p { 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>What kind of color this <a href="#">link</a> will be?</p> 14 </body> 15 </html> View Code頁面效果：
為什么設置了<p>元素的顏色為紅色，<a>元素的顏色卻是藍色？
這并不是因為<a>元素不繼承父元素的顏色（原諒我之前就是這么認為的），而是因為<a>元素繼承了<p>元素的顏色，但是這個繼承來的樣式根本沒有特殊性，然而瀏覽器默認樣式中對<a>元素設置了樣式，很明顯瀏覽器默認樣式的特殊性更高，于是<a>元素就按照瀏覽器默認樣式顯示。
?
2. ? ?CSS中有一個關鍵字是所有屬性共有的，inherit，它使一個屬性的值與其父元素相同。
在大多數情況下，不必指定繼承，因為大多數屬性會自動繼承；不過，自動繼承的屬性沒有特殊性，很容易被其它樣式覆蓋；當需要顯式地指定一個元素的樣式與其父元素一致時，使用inherit會更方便。
?
三、層疊
層疊規則：
1. ? ?按權重排序；讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶代理聲明。
2. ? ?權重相同的情況下，按照特殊性排序，特殊性越高的勝出。
3. ? ?特殊性相同的情況下，按照樣式表中的順序排序，后出現的勝出。
btw，正是因為這個規則，才會使用LoVe-HA的順序聲明鏈接樣式（LoVe-HA 依次為 :link; ?:visited; ?:hover; ?:active）。
?
關于 外部樣式<內部樣式<行內樣式 的說明：
這種說法來源于上述第3條規則。一般而言，在html的<head>元素下，我們習慣將外部樣式表的<link>標簽放在內部樣式<style>之前，這就導致了內部樣式的順序在外部樣式的順序之后，所以內部樣式優先級高；但是如果將<style>標簽與<link>標簽調換位置，比如這樣：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 p { 8 color:red; 9 } 10 </style> 11 <link rel="stylesheet" type="text/css" href="1.css"> 12 </head> 13 <body> 14 <p>What kind of color this para will be?</p> 15 </body> 16 </html> View Code此例中，外部樣式表包含 P {color:cyan;} 這樣一條規則，它的特殊性與內部樣式表一樣，都為0，0，0，1，但由于外部樣式表在內部樣式之后，所以外部樣式勝出，頁面顯示如下：
所以，
外部樣式<內部樣式 這只是一種習慣上的說法，關鍵還是要看它們出現的順序，順序越靠后的優先級更高。
當然，行內樣式總是最靠后的，所以它的優先級高于外部樣式和內部樣式，這是毋庸置疑的。
轉載于:https://www.cnblogs.com/cc156676/p/5670993.html
總結
以上是生活随笔為你收集整理的CSS 特殊性、继承与层叠的全部內容，希望文章能夠幫你解決所遇到的問題。
