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

    结论：由于 css 的层叠（cascading）,a元素继承自div的样式（color:red）被浏览器的a元素的默认样式给覆盖了

    分析：
    图一：
    image.png
    图二：
    image.png

    由以上两个图可知：
    1.浏览器本身对a元素有默认样式，（user agent stylesheet）（图二），对p元素没有默认样式（图一）
    2.由于css的层叠，a元素red继承自div（Inherited from div）被划掉了（图二）

    解决：
    1.更改a标签的默认样式

    1. div {
    2.     color: red;
    3.     background-color: #ccc;
    4.     font: 20px Verdana,Helvitica,sans-serif;
    5. }
    6. /*更改a标签的默认样式*/
    7. a {
    8.     color: black;
    9. }

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

    1. a {
    2.     color: inherit;
    3. }

    原理：

    image.png

    参考资料
    Cascade - CSS
    stackoverflow
    《css权威指南》 第三章