CSS的继承性和选择器优先级

1. 继承性

子元素可以继承父元素中以text- 、font- 、line- 开头和color样式

    
    test title

    

        div {
            text-decoration: underline;
            color: red;
        }

    





    
段落一
    链接一

• 浏览器默认给所有a标签指定了文字颜色为蓝色、文字带下划线的样式，比继承的优先级要高
• 如果父元素的line-height的值为文字大小的倍数，则子元素继承的line-height也是文字大小的倍数

显示效果如下：

2. 优先级

各选择器的权重如下：

选择器权重继承 或者 *0, 0, 0, 0元素选择器0, 0, 0, 1类选择器、伪类选择器0, 0, 1, 0id选择器0, 1, 0, 0行内样式 style = “”1, 0, 0, 0important无穷大

• 权重的比较是从左往右比较，左边能比较出大小，就不再往右比较

    
    test title

    

        li {
            color: red !important;
        }

        .first-project {
            color: yellow;
        }
        
    





    
项目一
    
项目一
    
项目一

显示效果如下：

2.1 复合选择器权重相加

对于复合选择器，权重是可以相加的，相加只能原位相加，不进位

    
    test title

    

        .first-project {
            color: yellow;
        }

        ul li {
            color: red;
        }

    





    
项目一
    
项目一
    
项目一

• ul li权重相加为0, 0, 0, 2，比类选择器权重0, 0, 1, 0要小

显示效果如下：