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

问题

首先我们一起来看一个知乎上的问题吧。

HTML：

<div>
  <span>文字</span>
  <a href="#">链接</a>
</div>

CSS：

div{ 
  color:red; 
}

问题：

为什么span标签继承了父类的颜色，唯独链接不能，直到直接设置a的颜色就行。

探究

这个问题曾经也困恼着我，后来大概猜到是继承的特指度没有a标签浏览器默认设置的高。
根据这个思路我们继续探讨，既然继承的没有浏览器默认的特指度高，那浏览器默认设置的是什么呢？我们以chrome浏览器为例进行查看，如下图：

我们看到，当我们把css样式设置里的color取消的时候，默认的设置就生效了，所以我们需要做的事情是覆盖掉默认样式里的颜色设置。

解决

我们可以直接设置想上图一样设置a标签的颜色，也可以设置成如下，这样a标签就会继承父元素的颜色设置了。

a {
  color: inherit;
}

扩展

1、不知道特指度的同学可以阅读一下我的这篇文章CSS选择器优先级

2、我查了一下webkit内核浏览器默认样式，a标签的默认设置如下：

a:any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

a:any-link:active {
    color: -webkit-activelink;
}

同时我找了一下，发现所有标签中，只有a元素有设置字体颜色，input、textarea有设置背景颜色，其他的都没有设置。
查阅地址：https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

如果你对样式的5种来源不是很清楚的话，可以阅读
CSS样式的五种来源及浏览器默认样式