CSS三大特性及权重问题

学习目标：

CSS三大特性

---

学习内容：

1.CSS层叠性

        相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

2.CSS继承性

        CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

3.CSS优先性

CSS权重的叠加

---

学习产出：

CSS层叠性原则

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

行高的继承

• 行高可以跟单位也可以不跟单位。
• 如果子元素没有设置行高,则会继承父元素的行高为1.5。
• 此时子元素的行高是:当前子元素的文字大小*1.5。
• body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

CSS的优先级及各选择器权重

• 权重是有4组数字组成,但是不会有进位。
• 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推.
• 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
• 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000, !important无穷大.
• 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。

权重叠加:

如果是复合选择器,则会有权重叠加,需要计算权重。

• div ul li -----》 0，0，0，3
• .nav ul li -----》 0，0，1，2
• a:hover -----》0，0，1，1
• .nav a -----》0，0，1，1