一、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使用该属性的initialvalue（该默认值不是浏览器默认值user agent stylesheet，而是属性默认值：） -
unset:如果是继承属性则继承父级，如果是非继承属性就用initial value
控制继承
5. 设置的样式：不同属性会叠加，相同属性会覆盖
- 选择器优先级不同：优先级高的会覆盖优先级低的
- 选择器优先级相同：后面的会覆盖前面的
6. 优先级计算
- 千位：如果声明在style的属性（内联样式）则该位得一分
- 百位：选择器中包含ID选择器则该位得一分
- 十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分
-
个位：选择器中包含元素，伪元素选择器则该位得一分
注意 ：通用选择器（*），组合符（+，>，~，' '），和否定伪类（:not)不会影响优先级）
优先级计算
参考：饥人谷课件
