CSS样式优先级

---

title: CSS样式优先级
icon: fa-css3
date: 2017-11-03 15:08:25
categories:
tags:

---

平台信息： win 10 64bit, Chrome 62 64bit

一、基础的CSS样式优先级

  
    
    
    
    
  

  
    

      
      
texttext
    
  

二、优先级规则总结：

优先级权重

CSS选择器	优先级比重（数字越大，优先级越高）：
!important（慎用）	∞
行内样式	1000
id选择器	100
类选择器、伪类选择器、属性选择器	10
标签选择器、伪元素选择器	1

优先级顺序

1. !important(慎用)
2. 行内样式(不推荐)
3. id选择器
4. 类选择器、伪类选择器、属性选择器
5. 标签选择器、伪元素选择器
6. 继承
7. 默认样式

规则

• 先比较优先级权重，再比较书写位置
• 不同属性会合并
• 相同属性
  1. css书写顺序：下面覆盖上面(link引入的外部样式表的位置就是link标签的位置)
  2. 高优先级覆盖低优先级

三、改变优先级

1. 改变书写顺序

2. 通过组合选择器改变CSS优先级。比如：

组合选择器	优先级比重
#childId	100
.childClcass	10
p.childClass	1+10=11
div .childClass	1+10=11
p.childClass.otherClass	1+10+10=21
div.fatherClass .childClass	1+10+10=21
div p.childClass	1+1+10=12
#fatherId	100
#fatherId p	100+1=101
div.fatherClass p.childClass	1+10+1+10=22

3. !important

p.childClass {
  color: grey !important;
}

• 在任意css位置使用!important会将该样式优先级提升至最高。（多个!important同样遵从css优先级）
• 尽量不要使用!important，否则会给后期的维护带来很大困扰。

四、CSS建议

• 非必要时，尽量不要使用!important
• 遵循关注点分离思想，推荐将样式与DOM分开（采用外部样式表或者内部样式表），不推荐书写行内（内联）样式
• 建议用类选择器控制样式，为了方便维护