MiaoMiao'S Dev Life
  • 首页
  • 技术专栏
首页 / 随笔 / 记一次a标签样式继承的问题

记一次a标签样式继承的问题

随笔 • 8 years ago

一 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}
html
Like (0)
Comments (0)
Back
Leave a comment
Related Posts
new Array(1) 和 [undefined] 一样嘛?
一 问题描述 最近在开发中碰到一个很奇怪的问题,请看下面代码 const newArr = new Array(3).map((item) => { return item = { name: ‘Chris xiong’ } }) console.log(newArr) 大家觉得这段代码的输出结 ...
7 years ago
初探模块系统02—如何让模块支持AMD/CMD和commonjs标准
前段时间在看一些前端模块化方面的知识,现在自己就来写一个符合amd/cmd 和commonjs标准的模块。在文中会穿插一些AMD/CMD,commonjs的基础知识,主要是为了让自己复习一下。了解的同学们可以直接略过。 一 原模块 该模块是一个实现类数组转为数组功能的模块 (function(arrayLike){ ...
7 years ago
初探flex布局
一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型,在flex布局模型中,弹性容器的子元素的排布可以比较灵活,可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多,比如我们碰到需要元素居中的应用场景时,flex布局就变得很有用了。更多关于f ...
8 years ago
© 2016-2025 All Rights Reserved⋅Developed by nicetheme⋅浙ICP备19034990号
  • 首页
  • 技术专栏
Search (0)
    Load more...
    Tags
    css docker es6 git html js typescript vue 动态表单 整洁架构