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

sixgo 發布于2019-08-29 12:20 / 3142人閱讀

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

在div中嵌套p元素和a元素，設置樣式如下


    this is paragraph
    this is a link

div {
    /*設置字體顏色不會被a標簽繼承，因為a標簽有默認樣式*/
    color: red;
    background-color: #ccc;
    font: 20px Verdana,Helvitica,sans-serif;
}

由于CSS的層疊（cascading），a元素繼承自div的樣式（color:red）被瀏覽器的a元素的默認樣式（鏈接默認顏色為blue，字體帶下劃線）給覆蓋了。

想要更改鏈接顏色有兩種方式

1.更改a標簽的默認樣式：

div {
    color: red;
    background-color: #ccc;
    font: 20px Verdana,Helvitica,sans-serif;
}
/*更改a標簽的默認樣式*/
a {
    color: black;
}

2.將a標簽的默認樣式更改為繼承color: inherit;

a {
    color: inherit;
}

參考資料
CSS 中 a 標簽為什么不能繼承父類的顏色？
CSS層疊-MDN
《CSS權威指南》第三章

GPU云服務器云服務器 html的字體顏色看apue遇到的有關問題 html標簽的顏色是 asp改字體顏色

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

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

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優先級

摘要：為了解決沖突，確定哪條規則勝出并最終被應用，提供了三種機制繼承層疊和特指。整個檢查更新過程結束后，再將每個標簽以最終設定的樣式顯示出來。層疊規則四順序決定權重。規則三設定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設定優先。為了解決沖突，確定哪條規則勝出并最終被應用，CSS提供了三種機制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣東西：CSS屬性...

高勝山 2019-08-28 18:01 評論0 收藏0
前端基礎入門二（CSS）

摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區分變量命名變量命名是用不要純數字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。回顧上一節HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評論0 收藏0
CSS超全筆記（適合新手入門）

摘要：選擇器和類選擇器區別標準規定，在同一個頁面內，不允許有相同名字的對象出現，但是允許相同名字的。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。CSS CSS初識 CSS(Cascading Style Sheets) 美化樣式 CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）...

番茄西紅柿 2019-04-23 11:56 評論0 收藏0