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

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

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

2024-07-13 14:22:03| 来源: 网络整理| 查看: 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层级怎么设置字体颜色不一样呢

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

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

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

今日新闻

点击排行

推荐新闻

图片新闻

专题文章