层叠，优先级，继承 --CSS基础回顾（一）

文章目录

• 层叠
• • 层叠规则
• 继承
• 特殊值
• 简写属性

---

层叠 层叠规则

当CSS发生声明冲突时，会按照根据以下三种条件解决冲突

• 样式表的来源
• 选择器的优先级
• 源码顺序

（1）样式表
我们通常添加的样式表属于作者样式表，其优先级大于用户代理样式表（浏览器的默认样式），作者样式表会将其覆盖。!important，该声明会被标记为更高优先级的来源

作者!important > 作者 > 用户代理

（2）优先级
浏览器将优先级分为：HTML的行内样式（内联样式），选择器样式
行内样式无选择器，直接作用于所在元素，它会覆盖来自样式表或< style >中的样式。如果想在样式表中覆盖行内样式，需要添加!important声明

//行内样式
<li>
	<a href = "", style = "background-color:orange">
	行内样式
	</a>
</li>

选择器优先级
若 选择器id数量多，则其优先级高
若 id数量一致，拥有最多类的选择器优先级高
若 id，类，数量一致，则最多标签名选择器优先级高
(3)源码顺序
字面意思，若来源，优先级均相同，则出现较晚的声明优先级高

如链接的访问（LoVe/HAte）
link -> visited -> hover -> active

在无必要的情况下，尽量不要使用!important 与ID选择器

继承

某些特定属性按DOM树向下传递

常见属性
文本：
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
列表：
list-stylem，list-style-type，list-style-position，list-style-image
表格边框：
border-collapse，border-spacing

特殊值

inherit，initial为两个特殊值可赋予任何属性
inherit 继承父元素的属性
initial 重置为该元素的默认值

简写属性

TRouBLe，上右下左指定盒子四个方向的属性
background-position等则遵守（x,y）的顺序进行简写