本文共 1275 字，大约阅读时间需要 4 分钟。

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

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

代码：

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