1.1 层叠

CSS

CSS，全面层叠样式表，（Cascading Styles Sheet）

CSS，是一种声明规则，即在我们规定的条件下产生各种各样的效果

CSS声明

css声明
该声明由一个属性（color）和一个值（black）组成。

attribute:value;

css声明块
包含在大括号内的一组声明被称作一个声明块
声明块前面有一个选择器

selector{
color:black;
height:120px;
}

层叠如何解决冲突

(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
(2) 选择器优先级：哪些选择器比另一些选择器更重要。
(3) 源码顺序：样式在样式表里的声明顺序。

样式表的来源

你的样式表属于作者样式表，除此之外还有用户代理样式表，即浏览器默认样式。用户代理样式表优先级低，你的样式会覆盖它们。
有些浏览器允许用户定义一个用户样式表。
这是第三种来源，它的优先级介于用户代理样式表和作者样式表之间。

!important声明

样式来源规则有一个例外：标记为重要（important）的声明
在声明的后面、分号的前面加上！important，该声明就会被标记为重要的声明

color:black !important;

标记了！important的声明会被当作更高优先级的来源

总体的优先级按照由高到低排列如下所示：
(1) 作者的！important
(2) 作者
(3) 用户代理

理解优先级

浏览器将优先级分为两部分：HTML的行内样式和选择器的样式

1.行内样式

用HTML的style属性写样式，这个声明只会作用于当前元素。

<div style="color:black">行内样式</div>

行内元素属于“带作用域的”声明，
它会覆盖任何来自样式表或者<”style“>标签的样式。

行内样式没有选择器， 为它们直接作用于所在的元素。
为了在样式表里覆盖行内声明，需要为声明添加！important，
这样能将它提升到一个更高优先级的来源

2.选择器优先级

优先级的第二部分由选择器决定

优先级的准确规则如下。
❑ 如果选择器的ID数量更多，则它会胜出（即它更明确）。
❑ 如果ID数量一致，那么拥有最多类的选择器胜出。
❑ 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。

优先级的权重
第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10（input[type]{属性选择器}）
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

3.优先级标记

一个常用的表示优先级的方式是用数值形式来标记，通常用逗号隔开每个数。
采用权重的方式可以更容易观察区别

4 .关于优先级的思考

如何解决 选择器之间覆盖的问题
一个属性选择器包含了一个ID，覆盖了类选择器

解决方法
方法1
将!important添加到想要设置的元素的声明上

.test{
background-color:orange !important}

方法2
通过修改css类名的方式来选中元素

.test a{
 color:black;
}
.test > .selected{
color: red;
}

方法3
降低 上一层选择器的优先级，例如将id选择器，降为类选择器

#nav .icon{
color:blank
}
.nav .icon{
color:pupple
}

1.1.3源码顺序

1.链接样式和源码顺序

优先级相同时，后出现的样式会覆盖先出现的样式。如果一个元素同时处于两个或者更多状态，最后一个状态就能覆盖其他状态。
如果用户将鼠标悬停在一个访问过的链接上，悬停效果会生效。如果用户在鼠标悬停时激活了链接（即点击了它），激活的样式会生效。

2. 层叠值

浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值。元素的每个属性最多只有一个层叠值。

1.1.4 两条经验法则

(1) 在选择器中不要使用ID。就算只用一个ID，也会大幅提升优先级。
(2) 不要使用！important。它比ID更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个！important，而且依然要处理优先级的问题。

@本文参考

《CSS深入解析》