CSS-三大特性，CSS层叠性、CSS继承性和CSS优先级，权重的计算，!important 的用法详解

CSS 层叠性

• 所谓层叠性是指多种CSS样式的叠加，当一个元素设置了多个相同的样式属性，一个属性就会覆盖另外一个属性
• 这是浏览器处理冲突的一种能力，如果一个元素通过多个相同选择器设置了相同的样式属性，那么这个时候一个属性就会将另一个属性层叠掉（覆盖掉）
• 层叠性主要遵循的是就近原则，在不考虑优先级的情况下，在多个样式属性中最终生效的样式是离标签最近的
• 只要样式不冲突就不会进行层叠；当一个元素被多个相同的选择器选中，并且设置了不同的样式属性，这些样式属性就会叠加合并一起作用到被选中的元素上

示例：

/* 都通过 类选择器选择了 div 元素 */
.box {
  color: red;
  background-color: skyblue;
}

.test {
  /* 这里的 color 样式属性会覆盖上面的 color 属性 */
  color: yellow;
  /* 不同的样式属性会进行叠加 */
  border: 2px dotted gray;
}

<div class="box test">
  这是一个 div 标签
</div>

CSS 继承性

• 所谓的继承性是指当子元素没有设置样式时，会继承父元素的一些样式
• 子元素可以继承父元素的样式有 text-，font-，line- 开头的样式属性，以及color属性可以继承
• 合理地使用继承可以简化代码，降低CSS样式的复杂性；比如有很多子级标签都需要某个样式，可以给父级指定这个样式，这些子级继承过来即可

示例：

.box {
  width: 200px;
  height: 100px;
  color: blue;
  font-size: 20px;
  text-align: center;
  line-height: 100px;
  background: pink;
}

<div class="box">
  <p>这是一个 p 标签</p>
</div>

CSS 优先级

CSS优先级

• 单个选择器的优先级:
  • 行内样式 > id选择器 > class选择器 > 标签选择器
• 多个选择器的优先级:
  • 多个选择器的优先级，一般情况下，指向越准确，优先级越高。

计算权重

特殊情况下，我们需要"假设"一些值：

选择器	优先级
标签选择器	优先级为1
类选择器	优先级为10
Id选择器	优先级为100
行内样式	优先级为1000
!import	∞ 无穷大

• 当选择器，选择上了某个元素的时候，那么要这么统计权重：

  • 计算 id的数量，类的数量，标签的数量，最终谁优先级越高用谁的样式

  • 如果权重（优先级）一样，那么以后出现的为准

    注意： 不进位，实际上能进位（255个标签，等于1个类名）但是没有实战意义！

• 如果大家都是0（没有选中某个元素、都是继承上去的）：

  • 就近原则 谁描述的近用谁的
  • 如果一样近，比权重，权重不同，谁大用谁的
  • 权重相同，谁写在后面用谁的

• 简单示例：

  同一个标签，携带了多个类名：

  <p class="spec1 spec2">我是什么颜色？</p>
  <p class="spec2 spec1">我是什么颜色？</p>
  

  和在标签中的类名的顺序无关，只和 css 选择器的顺序有关：

  .spec2{
      color:blue;
  }
  
  .spec1{
      color:red;
  }
  

  红色的；因为 css 选择器中 .spec1 写在后面

!important 标记

• important 语法：

  • Key:Value !important; Key 为css属性名，Value 为对应的属性值

  • 用来给一个属性提高权重；这个属性的权重就是无穷大

  • 一定要注意语法：

    正确的：

    font-size:60px !important;

    注： 不能将 !important 写在语句的外面，感叹号不能省略

• !important 需要强调3点：

  • !important 提升的是一个属性，而不是一个选择器

    CSS:

    p{
        color:red !important;  /* → 只写了这一个!important，所以就字体颜色属性提升权重*/
        font-size: 100px ;     /* → 这条属性没有写!important，所以没有提升权重*/
    }
    #para1{
        color:blue;
        font-size: 50px;
    }
    .spec{
        color:green;
        font-size: 20px;
    }
    

    HTML:

    <p class="spec" id="para1">我是p标签</p>
    

    所以，综合来看，字体颜色是red（听 important的）；字号是50px（听id的）。

  • !important无法提升继承的权重，该是0还是0

    比如HTML结构：

    <div>
        <p>哈哈哈哈哈哈哈哈</p>
    </div>
    

    CSS样式：

    div{
    	color:red !important;
    }
    p{
    	color:green;
    }
    

    由于div是通过继承性来影响文字颜色的，所以 !important 无法提升它的权重，权重依然是0。干不过p标签，因为p标签是实实在在选中了，所以字是绿色的（以p为准）

  • !important 不影响就近原则

    如果大家都是继承来的，按理说应该按照“就近原则”，那么 important 能否影响就近原则呢？

    • 影响是不可能影响的，这辈子都不可能影响的；远的，永远是远的；不能给远的写一个 important，干掉近的

      在开发网站的时候，不建议使用 !important ；因为会让 css 写的很乱