有关a标签的颜色、字体继承问题

div中嵌套p元素和a元素,设置样式如下

<div>
    <p>this is paragraph</p>
    <a href="#">this is a link</a>
</div>
div {
    /*设置字体颜色不会被a标签继承,因为a标签有默认样式*/
    color: red;
    background-color: #ccc;
    font: 20px Verdana,Helvitica,sans-serif;
}

《有关a标签的颜色、字体继承问题》

由于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;
}

《有关a标签的颜色、字体继承问题》

  • 2.将a标签的默认样式更改为继承color: inherit;

a {
    color: inherit;
}

参考资料
CSS 中 a 标签为什么不能继承父类的颜色?
CSS层叠-MDN
《CSS权威指南》第三章

    原文作者:Beau
    原文地址: https://segmentfault.com/a/1190000008893440
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞