CSS中a标签（元素）字体颜色继承问题（详细解释）（以及解决方法）

CSS层叠样式规则详解：点这里问题：a标签的字体颜色继承问题代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale...

DayDay_Lee

9013人浏览 · 2019-07-23 17:30:05

DayDay_Lee · 2019-07-23 17:30:05 发布

CSS层叠样式规则详解：点这里

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./../4.层叠/css/reset.css"> -->
    <style>
        DIV {
            color:red;
        }
    </style>
</head>

<body>
    <DIV>
        <a href="">
            a标签继承父类字体颜色问题
        </a>
        <p>
          a标签继承父类字体颜色问题
        </p>
    </DIV>
</body>

</html>

效果：

很显然这个a标签没有继承父类（div）中color属性，但是这个p标签继承了！！！

记下来详细解释

看这里

需要知识点：层叠样式规则（权重计算）和属性值的计算过程

首先我们要明白一个点，我们看到这个页面的效果，是怎通过CSS样式的渲染，就是浏览器去渲染所有的标签，也就是说一个元素（标签）的渲染过程需要完成哪些步骤呢？

渲染每个元素的前提条件：该元素的所有css属性必须有确定值

*一个元素，从所有属性都没有值，到所有的属性都有值!这个过程叫做是属性值的计算过程

属性值计算过程

在这里插入图片描述

具体过程

1. 确定声明值:  在开发者样式表里面和浏览器样式表里面,把没有冲突的属性值,作为该元素的属性值
2. 层叠冲突:    对样式表里面有冲突的声明,使用这个层叠规则,确定这个属性值
3. 使用继承:    对仍然没有属性值的属性,若可以继承的话,继承该父元素的值
4. 使用默认的值: 最后一步的话,对仍然没有熟悉值的属性,使用默认的属性值;

那我们根据这个过程来分析下：

我们打开浏览器，按下F12
第一步，确定声明值，你会发现color属性没有冲突，在声明的样式里面，只有浏览器对a标签进行了声明，所以把 color: -webkit-link 最后第一步完成；
第二步，层叠冲突，根据这个规则，color属性直接跳过
第三步，使用继承，很显然，a标签中color属性值已经有了，也跳过
第四步，自然而然就跳过！!
所以最后a标签里面的color属性值就是默认的！

那我们分析下p标签中的color属性

在这里插入图片描述

第一步：看上面的图，我们发现浏览器样式声明中没有color属性的声明，而开发者（自己）也没有对这个p标签下的color进行声明，也跳过第一步。
第二步：层叠冲突！很显然没有这个步骤
第三步：p元素的color属性还是没有值，然后这个color属性是可以继承的，一个元素的继承，可以去mdn官方网站查点这里看继承关系，正好color可以继承，最后p元素中color就去继承父元素的值，也就是我们设置的red值。
第四步：第三步确定了！自然而然，最后color属性值就是red

所以a标签内容颜色为什么继承不了父类的问题分析清楚了

解决的办法

a {
    text-decoration: none;// 去掉下划线
    /* inherit 继承 */
    color: inherit;
}

开发者通常会自己写重置样式表，去覆盖浏览器默认的样式
常见的重置样式表: normalize.css reset.css meyer.css

点这里常用的重置样式表

有不懂css层叠样式的可以看下面的：

CSS层叠样式规则详解：点这里

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

android中常见布局及其约束

布局可以理解为一种，用于。布局是一个相框，控件就是你要展示的照片。•你（布局规则）决定这些照片怎么排列：是从上到下整齐放（LinearLayout），还是自由定位（ConstraintLayout），还是全部叠在一起（FrameLayout）。🔹 ：一个布局可以包含多个子布局或控件，子布局又可以继续嵌套，从而形成复杂的 UI 结构。🧠 很多时候是因为对不了解，尤其是某些属性