2

一 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}

淼淼真人
1.1k 声望202 粉丝

一个前端菜鸟!