繼承
繼承即子類元素繼承父類的樣式，比如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> <p class="fonts"> <p id="p">我的字型大小為20px</p> <h1 id="h1">我的字型大小為40px</h1> </p></body></html>
運行結果：
我給div和h1標籤的父元素p設一個font-size為20px，p沒有問題，繼承了p的20px，但h1卻變為了40px，我們從下面的JS代碼可以擷取。
為什麼h1會是40px呢？因為h1的預設樣式為2em（32px）,如
，
並且h1預設的font-size為200%，因為p設了20px，所以通過繼承h1的最終font-size為20*2=40px，要想使h1的標籤字型大小也等於父標籤p，只需設定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> <p class="fonts"> <p id="p">我的字型大小為20px</p> <h1 id="h1">我的字型大小為20px</h1> </p></body></html>
運行結果：
css優先順序
!important > 行內樣式>ID選取器 > 類別選取器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
好像有點複雜。那我們通過以下幾個例子來證明吧。
方法——先看選取器是否命中對應的標籤，命中後再根據權重來進行判斷，權重的意思是數標籤的數量，通過比較ID 類 標籤 這三種選取器的數量來決定誰的優先順序最高。當數量相同時，通過層疊（後者覆蓋前者）來決定。
最後顯示綠色，因為雖然!important優先順序最高，但是沒有繼承性，li的顏色繼承自ul.
答案是yellow，因為三者都可以命中元素，所以通過權重判斷，第一個沒有ID選取器PASS掉，第二個和第三個一樣，通過層疊（第三覆蓋第二）決定顏色。
html是一個嵌套了12個p的複雜盒子，最裡面的p有me這個類，判斷方法：都可以命中元素，所以通過權重，類別選取器>元素選取器，所以選擇blue.
都可以命中對應元素，權重第一個大於第二個（比較標籤選取器數量），顯示blue.
先通過是否命中對應元素排除第四和第五個樣式，然後根據權重比較一二三——第一個： 兩個ID ;第二個：一個ID一個類;第三個：兩個類。所以根據權重ID>類 ，最後顯示blue.
答案是blue，第二個沒有命中PASS掉，第一個和第三個比較權重，由於第一個沒有類，所以答案是blue。
最後總結一下優先順序、層疊與權重的關係——
層疊是css的一個特性，如果兩個相同的屬性作用於同一標籤，它們會發生層疊。如果多個複合選取器，同時作用於我們的同一標籤，優先順序就不好計算了，就要計算權重，通過比較權重，來先出優先順序最高的選取器。
如何計算權重：
（數標籤的數量）先數id,如果id相等再數類如果id不相等id多的選取器權重高，權重越高，優先順序越高。如果id選取器數量相同，再數類別選取器，最後數標籤。
注意：比較權重的時候一定要注意：我們的選取器一定要命中對應的標籤才可能讓標籤擁有對應的屬性。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
