CSS

层叠、优先级和继承

回顾CSS的基础部分：层叠、优先级和继承

层叠

CSS本质上就是声明规则，即在各种条件下，我们希望产生特定的效果。
层叠指的就是这一系列规则。它决定了如何解决冲突，是CSS语言的基础。虽然有经验的开发人员对层叠有大体的了解，但是层叠里有些规则还是容易让人误解。
当声明冲突时，层叠会依据三种条件解决冲突：
(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
(2) 选择器优先级：哪些选择器比另一些选择器更重要。
(3) 源码顺序：样式在样式表里的声明顺序。

层叠的规则是按照这种顺序来考虑的：

样式表的分类：
1、作者样式表
2、用户自定义样式表
3、用户代理样式表(默认样式标)
样式表优先级从上至下依次递减，但是浏览器的应用顺序是先使用优先级低的样式表，这样优先级高的样式表就会覆盖优先级低的。
样式来源规则有一个例外：标记为重要（important）的声明。
标记了 ! important的声明会被当作更高优先级的来源，因此总体的优先级按照由高到低排列如下所示：(1) 作者的 ! important
(2) 作者
(3) 用户代理
层叠独立地解决了网页中每个元素的样式属性的冲突。

优先级

理解优先级：
如果无法用来源解决冲突声明，浏览器会尝试检查它们的优先级。理解优先级很重要。
浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。

行内样式：
如果用HTML的style属性写样式，这个声明只会作用于当前元素。实际上行内元素属于“带作用域的”声明，它会覆盖任何来自样式表或者

选择器优先级：
优先级的第二部分由选择器决定。
不同类型的选择器有不同的优先级。比如，ID选择器比类选择器优先级更高。实际上，ID选择器的优先级比拥有任意多个类的选择器都高。同理，类选择器的优先级比标签选择器（也称类型选择器）更高。

优先级的准确规则如下：
❑ 如果选择器的ID数量更多，则它会胜出（即它更明确）。
❑ 如果ID数量一致，那么拥有最多类的选择器胜出。
❑ 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。
(伪类选择器（如：hover）和属性选择器（如[type=“input”]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。)

优先级标记：
一个常用的表示优先级的方式是用数值形式来标记，通常用逗号隔开每个数。
优先级最高的ID列为第一位，紧接着是类，最后是标签。
比如：“1,2,2”表示选择器由1个ID、2个类、2个标签组成。

源码顺序：
层叠的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。
可以通过控制源码顺序，来给特殊链接添加样式。如果两个冲突选择器的优先级相同，则出现得较晚的那个胜出。

链接样式和源码顺序
书写顺序之所以很重要，是因为层叠。优先级相同时，后出现的样式会覆盖先出现的样式。如果一个元素同时处于两个或者更多状态，最后一个状态就能覆盖其他状态。如果用户将鼠标悬停在一个访问过的链接上，悬停效果会生效。如果用户在鼠标悬停时激活了链接（即点击了它），激活的样式会生效。
这个顺序的记忆口诀是“LoVe/HAte”（“爱/恨”），即link（链接）、visited（访问）、hover（悬停）、active（激活）。

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

两条经验法则
在选择器中不要使用ID。就算只用一个ID，也会大幅提升优先级。当需要覆盖这个选择器时，通常找不到另一个有意义的ID，于是就会复制原来的选择器，然后加上另一个类，让它区别于想要覆盖的选择器。
不要使用！important。它比ID更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个！important，而且依然要处理优先级的问题。

继承

还有最后一种给元素添加样式的方式：继承。
如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。比如通常会给元素加上font-family，里面的所有祖先元素都会继承这个字体，就不必给页面的每个元素明确指定字体了。

特殊值

有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。
使用inherit关键字
有时，我们想用继承代替一个层叠值。这时候可以用inherit关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。
还可以使用inherit关键字强制继承一个通常不会被继承的属性，比如边框和内边距。
使用initial关键字
有时，你需要撤销作用于某个元素的样式。这可以用initial关键字来实现

简写属性

简写属性是用于同时给多个属性赋值的属性。
比如：
font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。
background是多个背景属性的简写属性：background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。
border是border-width、border-style以及border-color的简写属性，而这几个属性也都是简写属性。
border-width是上、右、下、左四个边框宽度的简写属性。
理解简写值的顺序
记住顺序能少犯错误。它的记忆口诀是TRouBLe:top（上）、right（右）、bottom（下）、left（左）。
TRouBLe”口诀只适用于分别给盒子设置四个方向的值的属性。还有一些属性只支持最多指定两个值：
比如，padding: 1em 2em先指定了垂直方向的上/下属性值，然后才是水平方向的右/左属性值，而background-position: 25%75%则先指定水平方向的右/左属性值，然后才是垂直方向的上/下属性值。

常用伪类选择器

常用的伪类选择器有哪些？
:link 未访问
:visited 已访问
:hover 鼠标悬停
:active 鼠标按下
:enabled 可用的时候触发
:disabled 不可用的时候触发
:not(s) 匹配不含s选择器的元素
:frist-child 父元素的第一个元素
:last-child 父元素的最后一个元素
:only-child 父元素的唯一一个元素
:checked 选中 :checked+伪元素

注：文本内容来源于《深入解析CSS》，摘取了文中重要的内容，如有侵权，联系删除。