概述
CSS样式优先级分为 两 大类
1、级联
2、继承
级联
CSS 级联 规则决定了 样式冲突 时 胜出 的样式，这 三条 规则按照优先级 从高到低 分别为
1、样式表来源
2、选择器优先级
3、代码顺序
样式表来源 优先级最高
如果来源一致，那么取决于 选择器 优先级（行内样式归纳到选择器这一条）
如果 选择器 也一致，那么优先级取决于 代码的顺序
1、样式表来源
样式表来源主要有 两个 地方
1、作者样式表【 也就是咱们自己写的样式 】
2、用户代理样式表【 也就是俗称的浏览器默认样式 】
比如 列表 有 左侧内边距，有左侧小黑点，链接 是蓝色而且有下划线
作者样式表的优先级高于用户代理样式表
2、选择器优先级
分为两部分
1、HTML 行内样式
2、选择器的样式
a、HTML 行内样式 优先级 规则
1、HTML行内样式 的优先级高于所有 其他样式 的优先级
2、除了 !important 加了 !important 的样式优先级最高
3、没有别的样式能覆盖 行内样式 +!important
b、选择器的优先级 规则 【 很复杂 】
1、ID选择器 最多的样式优先级最高
2、如果 ID选择器 数量一致，那么 类选择器 最多的样式 优先级 最高
3、如果ID选择器和类选择器的数量都一样，那么标签选择器最多的样式胜出
4、伪类选择器（:hover）和 属性选择器（[type="input"]与类选择器优先级相同
3、源码顺序
如果前边所述的优先级都相同，那么出现在代码顺序后边的样式会覆盖代码顺序在前边的样式
.nav a {
background-color: red;
}
a.featured {
background-color: orange;
}
上面两个样式的优先级相同，一个选中了.nav的后代a，一个选中了 a 中的 .feature ,因为后者出现在代码后边，所以优先级更高，会覆盖前面的样式
继承
除了级联之外，还有一种给元素添加样式的方式 => 继承
1、继承的样式没有优先级
2、不是所有的属性都能被继承
默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些
1、它们主要是跟文本相关的属性
color
font
font-family
font-size
font-weight
font-variant
font-style
line-height
letter-spacing
text-align
text-indent
text-transform
white-space
word-spacing
2、还有一些其他的属性也可以被继承，比如列表属性
list-style
list-style-type
list-style-position
list-style-image
表格的边框属性 border-collapse border-spacing
3、可以在适当的场景使用继承
比如给 body 元素应用字体，让后代元素继承该字体，因为继承的样式没有优先级，所以很容易被覆盖
4、inherit 关键字
1、inherit 关键字可以让元素继承父元素的属性，可以用来覆盖原来的值
<div class="footer">
<a href="#"></a>
</div>
/* 全局尚未访问链接的颜色 */
a：link{
color：blue
}
/* 父元素 */
.footer {
color: #666
}
/* 优先级与 a:link 相同，都是一个标签选择器和一个(伪)类选择器，所以全局 color 被父元素的 #666 覆盖 */
.footer a {
color: inherit
}
a 的 color 设置了继承，所以第三个规则覆盖了全局规则
2、还可以使用 inherit 继承一些默认不会被继承的属性
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
如代码所示，将根元素盒模型设置为 border-box，然后全局继承根元素
这么做是考虑到有的组件是使用的 content-box，但是我们全局的选择器把所有元素的盒模型都改成了 border-box
所以这时候只需要把这个组件顶级容器的盒模型改成 content-box，那么组件内的元素就会继承这个顶级元素，恢复到 content-box
.some-component {
box-sizing: content-box;
}
浙公网安备 33010602011771号