css特性介绍

CSS三大特性：继承性、层叠性、优先级

    1.1继承性的介绍

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

    可以继承的常见属性（文字控制属性都可以继承，不是控制文字的不能继承，如height等）

    1.color

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

    3.text-indent、text-align

    4.line-height

    5. ...

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

    拓展：继承失效的特殊情况

    如果元素有浏览器默认样式，此时继承性依然存在，但是该元素不必继承父元素样式的特点

    例如，a有默认颜色蓝色，h1一级标题有默认大小...

    2.1层叠性的介绍

    特性：

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

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

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

    3.1优先级的介绍

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

    优先级公式：

    继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important

    注意点：!important写在属性值的后面，分号的前面

            !important不能提升继承的优先级，只要是继承优先级最低

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

   

    3.2权重叠加计算

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

    权重叠加计算公式：（每一级之间不存在进位）

                                                 第一级          第二级          第三极          第四级

                                                 (   0         ,         0         ,         0         ,         0   )

             复合选择器中：  行内样式个数  id选择器个数  类选择器个数  标签选择器个数

    比较规则：

    1.先比较第一级数字，如果比较出来了，之后忽略不看

    2.第一级数字相同时，再去比较第二级数字，如果比较出来了，之后忽略不看

    3.依次比较

    4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（写在下面的起作用）

    注意点：!important如果不是继承，则权重最高