博客

层叠式式贯穿整个 CSS 的一个性质，包含继承性和层叠性

继承性

• 如果一个标签没有设置过一些样式，它的某个祖辈级曾经设置过，而在浏览器中该标签也加载了这些样式，则这些样式都是从祖辈级继承而来，这种现象就是继承性

• 能够被继承的样式是所有的
  
  文字相关样式属性
  
  ，其他属性都不能被继承

• 继承性是一个很好的性质，可以将页面出现最多的文字样式设置给一个较大的优先级标签（如：body），其所有的后代标签都可以从优先级标签进行继承

层叠性

使用层叠性去解决冲突，多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他属性

判断选择器是否选中目标标签

选中目标标签

1. 比较选择器权重，权重高的层叠权重低的
2. 权重一样，比较 CSS 代码中的书写顺序，后面的代码层叠先前的代码

• 基础选择器的权重：根据选择范围，范围越大权重越小

  * < 标签选择器 < 类选择器 < id选择器

• 高级选择器权重的比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小，就不再比较后面，如果前面相等，就向后不断比较，知道比较出大小

  div #text1 #text2 {
    color: yellow;
  }/* 2 0 1 */
  
  div .text1 #text2 {
    color: red;
  }/* 1 1 1 */
  
  /* => yellow */
  

选中目标标签的祖辈级

1. 比较就近原则，HTML 结构中距离目标标签近的层叠远的

   div .father .son {
     color: yellow;
   }
   
   div .grandfather .son {
     color: red;
   }
   
   /* => yellow */
   

2. 如果距离相同，比较选择器权重，权重大的层叠权重小的

3. 如果权重相同，比较 CSS 代码中的书写顺序，后面的代码层叠先前的代码

important

在某个 css 属性的属性值后面加空格加 !important

1. !important 可以将某条属性的权重提升到最大
2. 在就近比较时无效

行内式

1. 行内的权重高于其他除 important 之外的选择器