CSS：属性继承、权重和层叠

1、继承：

有一些属性，当给自己设置样式的时候，自己的后代也都继承上了该样式，这个就是继承性。那么哪些属性是能够继承的呢？比如：color、 text-开头的、line-开头的、font-开头的等。这里强调一下font-size这个属性(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：

    
    
    


    

        
我的字体大小为20px
        
我的字体大小为40px
    

我给p和h1标签的父元素div设一个font-size为20px，p没有问题，继承了div的20px，但h1却变为了40px，我们从下面的JS代码可以获取：

getComputedStyle(document.getElementById('h1')).fontSize    ==> "40px"

getComputedStyle(document.getElementById('p')).fontSize    ==> "20px"

为什么h1会是40px呢？因为h1的默认font-size为2em（32px），我们知道em是相对单位，因此我们给h1的父级div设了20px，所以通过继承h1的最终font-size为20*2=40px，要想使h1的标签字体大小也等于父标签div，只需设置h1 {font-size:100%;}。

2、权重：

权重加权值（优先级）的介绍网上有很多，我们这里只简单介绍一下，当选择器直接选中了某个元素的时候，要这么统计权重：id的数量（每一个为 1，0，0），类的数量（每一个为 0，1，0），标签的数量（每一个为 0，0，1），如果不是直接选中某个元素，而是通过继承性影响的话，那么权重为0。更简单的就是记住如下优先顺序就好了：

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

3、层叠：

就是css处理冲突的能力，当同一个元素被两个或更多个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器，权重低的选择器效果会被权重高的选择器效果覆盖（层叠），相同权重下一般遵循就近原则，即如果权重一样，那么以后出现的为准：

内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式表(外部文件中)。