CSS中的继承与层叠

在了解CSS的继承与层叠之前，首先要了解一下html的文档树 以及选择器的特殊性和重要性（!important）！

CSS 继承

子元素将会继承父元素的css样式

在DOM树中，该属性样式会传递到父节点的最后一个子节点 知道没有节点为止
比如：

    哈哈 我是父元素
    
我是子元素
    
我是子元素
    
我是子元素

设置

的CSS样式

div {
    color: red;
}

猜猜会得到什么样的结果？？？
div以及其中的p标签内的文本都会变成红色！！！

继承.PNG

！！但凡是都有特例，子元素并不是所有的属性都能够继承，比如大多数框模型（外边距、内边距、背景、边框）可以自己试着写一下看看有什么效果··

其中继承样式 无特殊性 (连0都没有）*（通配选择器的特殊性为0）
要注意没有特殊性和 特殊性为0还是有很大差别的
举个例子：

 * {
         color: brown;
     }
     #text {
         color: blue;
     }
        

 
 
        哈哈 我是父元素
        
我是子元素
        
我是子元素
        
我是子元素
    

现在文本的颜色变成了什么样呢？？
其实是这样

特殊性0&无特殊性.PNG

特殊性为0 还是战胜了 无特殊性！！

CSS 层叠

让我们想想若两个规则的特殊性相同元素的最终样式会变成什么样？？？
（快想想CSS的中文名称是什么---）

p的文本颜色到底是什么样的呢？其实他是黄色的！

那我们现在来说一下CSS的层叠规则：

1. 按权重和来源排序

2. 按特殊性排序

3. 按顺序排序

---

1. 按权重和来源排序

标志!important的规则的权重要高于没有!important标志的规则
CSS三种样式来源：创作人员、读者和用户代理 权重比较
1.读者的重要声明 !important
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理（浏览器默认样式）声明

2.按特殊性排序

不同类型的选择器特殊性不同
其中ID选择器 > 类选择器 > 标签选择器
但是 这些选择器的属性若没有标志!important则会被内联样式所覆盖
比如：

   //为div添加内联样式
    哈哈 我是父元素
    
我是子元素
    
我是子元素
    
我是子元素

为其设置CSS样式

结果 字体变成了蓝色！！

内联样式.PNG

3.按照出现顺序排序

这一条就不多说了
当两条规则的特殊性相同时 最后出现的样式为准
所以我们通常把主样式放在最后