a标签样式继承的问题

keke 发布于2019-08-29 12:41 / 1797人阅读

摘要：一标签继承不了父元素的样式我们知道，诸如等一些属性是可以通过继承父元素得到的。那么这样就会涉及一个层叠优先级的问题。继承的属性优先级是最低的解决方法我们通过一句简单的样式就能解决这个问题

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

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

二层叠样式表的层叠关系

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

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

//html结构
 
    
 
//
//用户代理
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}

GPU云服务器云服务器 a标签样式可继承样式类继承问题 html样式标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112068.html

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

摘要：在中嵌套元素和元素，设置样式如下设置字体颜色不会被标签继承，因为标签有默认样式由于的层叠，元素继承自的样式被浏览器的元素的默认样式链接默认颜色为，字体带下划线给覆盖了。在div中嵌套p元素和a元素，设置样式如下 this is paragraph this is a link div { /*设置字体颜色不会被a标签继承，因为a标签有默认样式*/ ...

sixgo 2019-08-29 12:20 评论0 收藏0
HTML+CSS复习之CSS基础篇

摘要：内容简述关于，确实太繁杂了，内容多。写好不易，基本上就这个调了。里面有许多属性是可以继承的，注意了，继承一定是继承父级元素的样式在这里我就列出可以继承的属性，和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。内容简述关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。大家肯定听过CSS奇淫技巧吧，关于这个我还没有去深入了解，只是说普通的效果啥的，我...

Salamander 2019-08-29 12:38 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

yanbingyun1990 2019-08-02 16:00 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

FullStackDeveloper 2019-08-29 14:01 评论0 收藏0
CSS节选——选择器

摘要：，，层叠样式表，请留意层叠概念。为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS，cascading style sheet，层叠样式表，请留意层叠概念。 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:targ...

番茄西红柿 2019-04-23 13:42 评论0 收藏0