a標簽樣式繼承的問題

keke 發布于2019-08-29 12:41 / 1826人閱讀

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

一 a標簽繼承不了父元素的樣式？

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

二層疊樣式表的層疊關系

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

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

//html結構
 
    
 
//
//用戶代理
p{margin-left:5px;}
//頁面開發者
p{margin-left:6px;}
//用戶樣式表
.test{margin-left:10px;}
//output
margin-left:6px;

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

三 a標簽問題分析

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

a{color:inherit}

GPU云服務器云服務器 a標簽樣式可繼承樣式類繼承問題 html樣式標簽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112068.html

有關a標簽的顏色、字體繼承問題

摘要：在中嵌套元素和元素，設置樣式如下設置字體顏色不會被標簽繼承，因為標簽有默認樣式由于的層疊，元素繼承自的樣式被瀏覽器的元素的默認樣式鏈接默認顏色為，字體帶下劃線給覆蓋了。在div中嵌套p元素和a元素，設置樣式如下 this is paragraph this is a link div { /*設置字體顏色不會被a標簽繼承，因為a標簽有默認樣式*/ ...

sixgo 2019-08-29 12:20 評論0 收藏0
HTML+CSS復習之CSS基礎篇

摘要：內容簡述關于，確實太繁雜了，內容多。寫好不易，基本上就這個調了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內聯元素可繼承。每個瀏覽器可能表現不一樣。內容簡述關于CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。大家肯定聽過CSS奇淫技巧吧，關于這個我還沒有去深入了解，只是說普通的效果啥的，我...

Salamander 2019-08-29 12:38 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

yanbingyun1990 2019-08-02 16:00 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

FullStackDeveloper 2019-08-29 14:01 評論0 收藏0
CSS節選——選擇器

摘要：，，層疊樣式表，請留意層疊概念。為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類——:hover,:link,:active,:targ...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0