首先聲明一下CSS三大特性——繼承、優先級和層疊。繼承即子類元素繼承父類的樣式，比如font-size,font-weight等f開頭的css樣式以及text-align,text-indent等t開頭的樣式以及我們常用的color。簡單的就不演示了，強調一下font-size這個東東(雖然也有繼承，但是標簽不同繼承的效果也不一樣)，比如下面的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .fonts { font-size: 20px; } </style> </head> <body> <div class="fonts"> <p id="p">我的字體大小為20px</p> <h1 id="h1">我的字體大小為40px</h1> </div> </body> </html>
我給p和h1標簽的父元素div設一個font-size為20px，p沒有問題，繼承了div的20px，但h1卻變為了40px，我們從下面的JS代碼可以獲取。
為什么h1會是40px呢？因為h1的默認樣式為2em（32px）,如下圖
，
並且h1默認的font-size為200%，因為div設了20px，所以通過繼承h1的最終font-size為20*2=40px，要想使h1的標簽字體大小也等於父標簽div，只需設置h1 {font-size:100%;},如下圖所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .fonts { font-size: 20px; } h1 { font-size: 100%; } </style> </head> <body> <div class="fonts"> <p id="p">我的字體大小為20px</p> <h1 id="h1">我的字體大小為20px</h1> </div> </body> </html>
下面我們再一起聊聊優先級這玩意，
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
額，好像有點復雜。那我們通過以下幾個例子來證明吧。
方法——先看選擇器是否命中對應的標簽，命中后再根據權重來進行判斷，權重的意思是數標簽的數量，通過比較ID 類 標簽 這三種選擇器的數量來決定誰的優先級最高。當數量相同時，通過層疊（后者覆蓋前者）來決定。
最后顯示綠色，因為雖然!important優先級最高，但是沒有繼承性，li的顏色繼承自ul.
答案是yellow，因為三者都可以命中元素，所以通過權重判斷，第一個沒有ID選擇器PASS掉，第二個和第三個一樣，通過層疊（第三覆蓋第二）決定顏色。
html是一個嵌套了12個div的復雜盒子，最里面的div有me這個類，判斷方法：都可以命中元素，所以通過權重，類選擇器>元素選擇器，所以選擇blue.
都可以命中對應元素，權重第一個大於第二個（比較標簽選擇器數量），顯示blue.
先通過是否命中對應元素排除第四和第五個樣式，然后根據權重比較一二三——第一個： 兩個ID ;第二個：一個ID一個類;第三個：兩個類。所以根據權重ID>類 ，最后顯示blue.
答案是blue，第二個沒有命中PASS掉，第一個和第三個比較權重，由於第一個沒有類，所以答案是blue。
最后總結一下優先級、層疊與權重的關系——
層疊是css的一個特性，如果兩個相同的屬性作用於同一標簽，它們會發生層疊。如果多個復合選擇器，同時作用於我們的同一標簽，優先級就不好計算了，就要計算權重，通過比較權重，來先出優先級最高的選擇器。
如何計算權重：
（數標簽的數量）先數id,如果id相等再數類如果id不相等id多的選擇器權重高，權重越高，優先級越高。如果id選擇器數量相同，再數類選擇器，最后數標簽。
注意：比較權重的時候一定要注意：我們的選擇器一定要命中對應的標簽才可能讓標簽擁有對應的屬性。