CSS3-三大特性-继承性、层叠性、优先级

    CSS三大特性

        1 继承性

        2 层叠性

        3 优先级

        1 继承性

            特性：子元素有默认继承父元素样式的特点（子承父业）

            可以继承的常见属性：

                1 color

                2 font-style、font-weight、font-size、font-family

                3 text-indent、text-align

                4 line-height

                5 ……

            注意：可以通过调试工具判断样式是否可以继承

            拓展

                继承的应用

                    好处：可以在一定程度上减少代码

                    常见应用场景：

                        1 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

                        2 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

                继承失效的特殊情况

                    如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

                    1 a标签的color会继承失效

                        其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

                    2 h系列标签的font-size会继承失效

                        其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

                    3 div的高度不能继承，但是宽度有类似于继承的效果

                        宽度属性不能继承，但是div有独占一行的特性

        2 层叠性

            特性：

                1 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

                2 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

            注意点：

                1 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

        

        3 优先级

            特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

            优先级公式：（作用范围越大，优先级越低）

                继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（声明样式具有最高优先级）

            注意点：

                1 !important写在属性值的后面，分号的前面

                2 !important不能提升继承的优先级

                3 给继承父级的元素添加!important无效

                4 实际开发中不建议使用 !important

                

        3.1  权重叠加计算

            场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

            权重叠加计算公式：（行内式，id选择器，类选择器，标签选择器）

                比较规则：左边个数越多，权重越大，左边个数相同，下一级个数越多，权重越大

            提示：!important权重最大，继承权重最小

            权重计算题解题步骤：

                1 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass

                2 通过权重计算公式，判断谁权重最高

            注意：

                实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

代码：继承性

    
    
    
    


    

        我是div标签
        
我是h3标题，继承了div标签文字的大小、颜色和粗细
        
回到过去，也只会重蹈覆辙而已
        
因为当时的你，会做出同样的选择
        
时间不等人，现在开始一切都来得及
    

效果图：

 

代码：层叠性

    
    
    
    


    

        我是div标签
        
我是h3标题，继承了div标签文字的大小、颜色和粗细
        
回到过去，也只会重蹈覆辙而已
        
因为当时的你，会做出同样的选择
        
时间不等人，现在开始一切都来得及
    

效果图：

 

代码：优先级

    
    
    
    


    

        我是div标签
        
我是h3标题，继承了div标签文字的大小、颜色和粗细
        

            
回到过去，也只会重蹈覆辙而已
            
因为当时的你，会做出同样的选择
            
时间不等人，现在开始一切都来得及
        
    

效果图：