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

您所在的位置：网站首页 › div里的字体怎么设置颜色不变化 › CSS中a标签（元素）字体颜色继承问题（详细解释）（以及解决方法）

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

2024-07-06 00:10| 来源: 网络整理| 查看: 265

CSS层叠样式规则详解：点这里问题：a标签的字体颜色继承问题

代码：

Document DIV { color:red; } a标签继承父类字体颜色问题

a标签继承父类字体颜色问题

效果：

很显然这个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层叠样式规则详解：点这里

【本文地址】

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

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

今日新闻

推荐新闻