CSS选择器优先级

一、css样式的来源

• 使用不同的选择器设置的样式
• 浏览器默认的样式（user agent stylesheet）
• 继承的样式 (inherited from xxx)

二、 选择器的优先级

1. 从高到低顺序分别是：

!importtant>内联样式>选择器设置样式>浏览器默认样式>继承样式

①. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
②. 作为Style属性写在元素标签上的内联样式
③. 选择器设置的样式

• id选择器
• 类选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通用选择器

④. 浏览器默认样式
⑤. 继承样式

!important:优先级最高，需要覆盖内联样式就可以使用

<div class="box">
  <p>hello</p>
</div>
  <style>
    p{
      color: red!important;
    }
    .box p{
      color: blue;
    }
  </style>

2. 浏览器默认样式

浏览器默认样式

3.继承样式

①：继承属性与非继承属性

• 继承属性：和文本相关的大部分可以继承。
  color、font-size、font-family、line-height
• 非继承属性
  border、background、margin、padding、display
  查询是否继承属性链接：https://www.w3.org/TR/CSS21/propidx.html

4. 控制继承

• inherit:使用继承父级的样式
• initial使用该属性的initial value（该默认值不是浏览器默认值user agent stylesheet，而是属性默认值：）
• unset:如果是继承属性则继承父级，如果是非继承属性就用initial value
  控制继承

5. 设置的样式：不同属性会叠加，相同属性会覆盖

• 选择器优先级不同：优先级高的会覆盖优先级低的
• 选择器优先级相同：后面的会覆盖前面的

6. 优先级计算

• 千位：如果声明在style的属性（内联样式）则该位得一分
• 百位：选择器中包含ID选择器则该位得一分
• 十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分

• 个位：选择器中包含元素，伪元素选择器则该位得一分
  注意 ：通用选择器（*），组合符（+，>，~，' '），和否定伪类（:not)不会影响优先级）

  
  优先级计算

参考：饥人谷课件