a标签样式继承的问题

一 a标签继承不了父元素的样式？

咱们知道，诸如font-size,color等一些属性是能够经过继承父元素获得的。那么，为何当咱们想让a标签去继承父元素的颜色时，结果却经常不能如咱们所愿呢？
要想弄明白这个问题，首先咱们要去了解一个概念-层叠样式表的层叠关系

二 层叠样式表的层叠关系

层叠是css中的核心，它定义了一个如何合并来自多个源的属性值算法。Mdn定义
也能够简单理解为当有多个样式表去做用于一个元素的时候，这个元素应该采起哪些样式表里的样式。
那么这样就会涉及一个层叠优先级的问题。咱们能够来看看下面这张图（也能够去MDN中查看）

说明：
（1）用户代理表示的是浏览器默认样式，浏览器本身都会有一套默认样式，不一样的浏览器默认样式可能不同。
（2）页面做者指的就是页面开发人员了。
（3）而用户指定就是页面的使用者了。（其实咱们不多会去本身设置css属性）
从上图中咱们能够看出，浏览器的默认样式的优先级是最低的。其次是用户的样式，可是要注意的是用户的样式中若是加!important强调，则其优先级最高，超过开发者加!important强调。
咱们来看一个关于层叠优先级的demo

//html结构
 <div>
   <p class="test"></p> 
 </div>
//
//用户代理
p{margin-left:5px;}
//页面开发者
p{margin-left:6px;}
//用户样式表
.test{margin-left:10px;}
//output
margin-left:6px;

从上面的demo中，咱们能够看出，即便用户样式表的css选择器优先级优于页面开发者，可是最终的样式依旧是页面开发者指定的样式，所以咱们知道标签的css属性，层叠的优先级是大于css选择器的。（固然前提是css规则都做用到了某个元素。）

三 a标签问题分析

经过了解以上的知识，咱们实际上就能分析出a标签为何不能继承父元素的颜色。这主要是由于用户代理实际上已经为a标签设置好了一个颜色。它不会再去继承父元素的颜色了。（其实继承了，可是由于是继承的，全部优先级比不上本身自己设置的。继承的css属性优先级是最低的)
解决方法：
咱们经过一句简单的css样式就能解决这个问题

a{color:inherit}