CSS 层叠性

• 概念

  层叠性是指多种样式的叠加，如果多个样式设置到同一个元素上，这个时候一个属性就会将另一个属性层叠掉。

• 原则

  同一个元素设置多个样式造成样式冲突，遵循的原则是就近原则，执行最近的样式。

CSS 继承性

• 概念

  子标签会继承父元素的一些样式，如文本颜色和字体大小

注意：

• 恰当的使用继承可以简化代码，降低CSS样式的复杂度
• 子元素可以继承父元素的样式比如：text-、font-、line-这些开头的样式，以及color样式

CSS 选择器优先级（重要）

• 概念

  多个样式规则应用在同一个元素上，这时：

  • 选择器相同，执行CSS层叠性规则，就近原则
  • 选择器不同，计算选择优先级权重

• 权重计算

  选择器	计算权重
  样式继承或通配符*	0,0,0,0
  元素标签选择器	0,0,0,1
  类选择器，伪类	0,0,1,0
  id选择器	0,1,0,0
  内联样式style=“”	1,0,0,0
  !important	∞ 无穷大

  权重顺序：内联样式,id选择器,类选择器（包含伪类）,标签选择器

  • 属性选择器的权重与类选择器相同0,0,1,0为10

• 权重叠加

  当使用复合选择器，后代选择器等多个选择器组合时，会出现选择器权重叠加，即权重相加，如：

  • div ul li ----> 0,0,0,3
  • .nav ul li ----> 0,0,1,2
  • a:hover ----> 0,0,1,1

  注意：

  • 权重数位之间没有进制关系，比如：0,0,0,5 + 0,0,0,5 = 0,0,0,10，而不是0,0,1,0
  • 权重是从左至右比较，如：0,1,0,0 > 0,0,99,99
  • 继承样式的权重为 0
  • 权重相同时则根据层叠性的就近原则
  • <a></a>标签与h标题这两个特殊标签在浏览器中有自己特殊的样式，所以有时需要单独设置样式