有关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;
}

由于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权威指南》第三章