上邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css程式碼的權重優先順序問題。

（1）css的繼承規則

CSS的某些樣式程式碼是具有繼承性的，那麼究竟什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面程式碼：我們設定p標籤的字型顏色為紅色並新增1畫素的紅色邊框。

在網頁中的顯示效果就如下圖所示：

從上邊的圖片你可以看出字型顏色為紅色不僅使p標籤中的文字變成了紅色，還應用於p標籤中的所有子元素文字，這裡子元素為span標籤。但是邊框屬性並沒有應用到子元素中去。

經過我們總結測試，可以得出以下結論：

• 關於文字樣式的屬性，都具有繼承性。這些屬性包括：color、 text-開頭的、line-開頭的、font-開頭的。

• 關於盒子、定位、佈局的屬性，都不能繼承。

（2）css程式碼的權重優先順序

css就像工程師一樣是很嚴謹的，有的時候我們為同一個元素設定了不同的CSS樣式程式碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的程式碼：

上邊的程式碼中，p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？#0f0是正確的顏色，那麼為什麼呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下面是權值的規則：

標籤（div、p、span等）的權值為1，類選擇符（.xxx）的權值為10，ID選擇符（#xxx）的權值為100，內聯樣式的權值為1000。

我們來做一個權重的拔高練習，觀察以下程式碼看一下p標籤以及span標籤內的文字顯示顏色應該是什麼？

由上邊我們可以看出來，p標籤的樣式中#second的權值最高為100，那麼p的文字顏色為yellow，而span標籤樣式中內聯樣式權值最高為1000，那麼span的文字顏色就為#000。我們的結果就會如下圖所示：

對於css的繼承以及程式碼優先順序的問題我們今天就先介紹到這裡，大家在平時可以自己多加練習練習，自己多寫幾個權重的例子嘗試嘗試。

每日金句：人若有志，就不會在半坡停止

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊