CSS三大特性

1.层叠性

• 样式冲突，遵守就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

2.继承性

• 子标签会继承父标签的某些样式

• 子元素可以继承父元素的样式（字体、颜色属性）、（text-，font-，line-这些元素开头，以及color）

• 行高的继承性

  • 行高可以跟单位也可以不跟单位

  • 如果子元素没有设置行高，则会继承父元素的行高

  • 例子：

    body {
    	font:12px/1.5;
    }
    

    此时子元素的行高：当前子元素的文字大小 * 1.5

  • body行高1.5 最大优势在于里面子元素可以根据自己文字大小自动调整大小

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

• 选择器权重表

  选择器	选择器权重
  继承	NULL
  *	0，0，0，0
  元素选择器	0，0，0，1
  类选择器，伪类选择器，类属性	0，0，1，0
  ID选择器	0，1，0，0
  行内样式Style=""	1，0，0，0
  ！important	无穷大

• 注意点：

  • 权重是由4组数字组成，但是不会有进位

  • 等级判断从左向右，如果某一位数值相同，则判断下一位数值

  • 继承的权重为NULL，如果该元素没有直接选中（没有重写样式），不管父元素权重多高，子元素得到的权重都是NULL

  • 继承权重为NULL，通配符权重为0，而0 > NULL，因此通配符的权重大于继承。因此此场景容易出错，查看以下情况：

    <style>
        // 0
        * {
            color: red;
        }
        
        // 1
        div {
            color: green;
        }
    </style>
    
    <div>
        div内容
        <span>span内容</span>
    </div>
    

    此时以上的span内容为红色，原因：span继承div，但是继承权重为NULL，而*权重为0，0 > null，因此span颜色为红色，为了避免这种情况，一般用html替代*，这样子元素就能很好的继承最近一级父元素的属性

  • 尽量少用!important，原因：使得css权重规则很乱，不易维护

• 复合选择器涉及到权重叠加问题

• 一般优先级会产生许多问题，为了避免，写css的时候会去一层一层书写，容易造成漏写的情况，因此，可以使用css预处理器解决样式权重问题，比如：less, sass, webpack, glup等。