深入解析CSS读书笔记-第一章-层叠、优先级和继承
1.1层叠
层叠（cascade）决定了如何解决冲突，是css语言的基础。
声明发生冲突时，层叠会根据三种条件去解决冲突。
- 样式表的来源：自己定义的样式或是浏览器默认样式。
- 选择器的优先级：哪些选择器的优先级更高。
- 源码的顺序：样式在样式表声明的顺序。
下图展示了规则的用法：
术语解释：
- “color:black” 前面是css的一行。它被称作一个声明。该声明由一个属性（color）和一个值（black）构成。
- 不要将CSS属性（property）跟HTML属性（attribute）混淆。
- 包含在大括号内的一组声明被称作一个声明块。声明块前面有一个选择器（如下面的body）
body { color:black; font-family:Helvet; }
- 选择器和声明块一起组合成了规则集。一个规则集也简称一个规则.
- 最后**@规则（at-rules）**是指用“@”符号开头的语法。如@import规则或者@media查询。
1.1.1 样式表来源
样式表分为作者样式表（你自己定义的样式表）和用户代理样式表（浏览器默认样式）。有的浏览器也允许用户定义一个用户样式表，他的优先级介于两者之间。
样式表来源规则有一个例外：标记为**重要(important)**的声明，他的优先级比用户代理样式和作者样式表都要高。（谨慎使用，增加复杂性）
1.1.2 理解优先级
如果无法用来源解决冲突声明，浏览器会尝试检查他们的优先级。
- 行内样式
只作用于当前元素。Hello world!
- 选择器优先级
ID选择器的优先级高于类选择器，类选择器优先级高于标签选择器。
优先级的准确规则如下：
- 如果选择器的ID数量更多，则它会胜出。
- 如果ID一致，那么拥有更多类的选择器胜出。
- 如果以上两者都一致，那么拥有最多标签的选择器胜出。
说明 伪类选择器和属性选择器与一个类选择器的优先级相同。通用选择器和组合器对优先级没有影响。
- 优先级标记
一个常用的优先级标记的方式是用数值标记，通常用逗号隔开。如“1，2，4”表示一个ID、2个类和4个标签。用于判断声明块的优先级。
1.1.3 源码顺序
如果声明来源和优先级相同，那么在样式表中出现较晚的声明胜出。
层叠值——作为层叠结果，应用到一个元素上的特定属性的值。浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的属性。如果一个声明胜出，它就称作一个层叠值，元素每个属性只能有一个层叠值。
1.1.4 两条经验法则
- 在选择器中不要使用ID。优先级会大幅度提升，但是通常找不到另一个有意义的ID，于是还得加多一个类。
- 不要使用！important。它比ID更难覆盖，且依然要处理优先级问题。
1.2 继承
还有一种可以给元素添加样式的方式：继承。如果一个属性没有层叠值，则可能会继承某个祖先元素的值。例如，通常给body指定字体，这样里边所有元素都会继承这个字体。继承是沿着DOM树往下传递的，如下图。
在浏览器可以按F12打开开发者模式，在Elements窗口模式下，在右方选择器样式的底部可以看到继承（Inherited）的属性值。
1.3 特殊值
有两个值可以赋给任意属性，用于控制层叠：inherit和initial。
1.3.1 使用inherit关键字
有时，我们想用继承代替一个层叠值。这时候可以用inherit关键字。可以用来覆盖另一个值，这样该元素会继承其父亲的值。
<head>
<style>
body {
font-family: sans-serif;
}
...
a:link {
color: blue;
text-decoration: none;
}
.footer {
/*页脚文本颜色设置为灰色 */
color: #666;
background-color: #ccc;
padding: 15px 0;
text-align: center;
font-size: 14px;
}
.footer a {
/*从页脚的文本继承文本颜色*/
color: inherit;
text-decoration: underline;
}
style>
head>
<body>
<footer class="footer">
© 2016 Wombat Coffee Roasters —
<a href="/terms-of-use">Terms of usea>
footer>
body>
1.3.2 使用initial关键字
有时候需要撤销作用于某个元素的样式，这样可以用initial来实现。
每一个CSS样式都有初始值。如果将initial属性赋给某个值，那么就会有效地将其重置为默认值，这个操作相当于复位了该值。
.footer a {
/* 浏览器默认样式是黑色，相当于color：black;*/
color:initial;
text-decoration:underline;
}
1.4 简写属性
简写属性是用于同时给多个熟悉感赋值的属性。
font: italic bold 18px/1.2 "Helvetica","Arial",sans-serif;
还有以下属性诸如background、border 。
}
# 1.4 简写属性
简写属性是用于同时给多个熟悉感赋值的属性。
```css
font: italic bold 18px/1.2 "Helvetica","Arial",sans-serif;
还有以下属性诸如background、border 。
简写属性会覆盖其他样式。