a標(biāo)簽樣式繼承的問題

keke 發(fā)布于2019-08-29 12:41 / 1830人閱讀

摘要：一標(biāo)簽繼承不了父元素的樣式我們知道，諸如等一些屬性是可以通過繼承父元素得到的。那么這樣就會涉及一個層疊優(yōu)先級的問題。繼承的屬性優(yōu)先級是最低的解決方法我們通過一句簡單的樣式就能解決這個問題

一 a標(biāo)簽繼承不了父元素的樣式？

我們知道，諸如font-size,color等一些屬性是可以通過繼承父元素得到的。那么，為什么當(dāng)我們想讓a標(biāo)簽去繼承父元素的顏色時，結(jié)果卻常常不能如我們所愿呢？
要想弄明白這個問題，首先我們要去了解一個概念-層疊樣式表的層疊關(guān)系

二層疊樣式表的層疊關(guān)系

層疊是css中的核心，它定義了一個如何合并來自多個源的屬性值算法。Mdn定義
也可以簡單理解為當(dāng)有多個樣式表去作用于一個元素的時候，這個元素應(yīng)該采取哪些樣式表里的樣式。
那么這樣就會涉及一個層疊優(yōu)先級的問題。我們可以來看看下面這張圖（也可以去MDN中查看）

說明：
（1）用戶代理表示的是瀏覽器默認(rèn)樣式，瀏覽器自己都會有一套默認(rèn)樣式，不同的瀏覽器默認(rèn)樣式可能不一樣。
（2）頁面作者指的就是頁面開發(fā)人員了。
（3）而用戶指定就是頁面的使用者了。（其實我們很少會去自己設(shè)置css屬性）
從上圖中我們可以看出，瀏覽器的默認(rèn)樣式的優(yōu)先級是最低的。其次是用戶的樣式，但是要注意的是用戶的樣式中如果加!important強(qiáng)調(diào)，則其優(yōu)先級最高，超過開發(fā)者加!important強(qiáng)調(diào)。
我們來看一個關(guān)于層疊優(yōu)先級的demo

//html結(jié)構(gòu)
 
    
 
//
//用戶代理
p{margin-left:5px;}
//頁面開發(fā)者
p{margin-left:6px;}
//用戶樣式表
.test{margin-left:10px;}
//output
margin-left:6px;

從上面的demo中，我們可以看出，即使用戶樣式表的css選擇器優(yōu)先級優(yōu)于頁面開發(fā)者，但是最終的樣式依舊是頁面開發(fā)者指定的樣式，因此我們知道標(biāo)簽的css屬性，層疊的優(yōu)先級是大于css選擇器的。（當(dāng)然前提是css規(guī)則都作用到了某個元素。）

三 a標(biāo)簽問題分析

通過了解以上的知識，我們實際上就能分析出a標(biāo)簽為什么不能繼承父元素的顏色。這主要是因為用戶代理實際上已經(jīng)為a標(biāo)簽設(shè)置好了一個顏色。它不會再去繼承父元素的顏色了。（其實繼承了，但是因為是繼承的，所有優(yōu)先級比不上自己本身設(shè)置的。繼承的css屬性優(yōu)先級是最低的)
解決方法：
我們通過一句簡單的css樣式就能解決這個問題