朝花夕拾《精通CSS》二、选择器 & 层叠
一、背景
翻出我4年前看的《精通CSS》一书，可惜当初没有整理读书笔记的习惯，最近又很少写前端，遂很多东西、知识点遗忘了，恰且现在 css 也有些变化和进步，遂一起打包整理，输出成几篇 blog 系列，以犒自己。
二、选择器
1、基本选择器
（1）标签选择器 ——elementname
（2）类别选择器 ——.elementname
（3）ID选择器 ——#elementname
（4）通用选择器 ——*
2、组合选择器
| 符号 | 说明 |
|---|---|
A > B |
子代选择器 |
A B |
后代选择器 |
A + B |
相邻兄弟选择器 |
A ~ B |
兄弟选择器 |
注意：相邻兄弟选择器和兄弟选择器都不能选择自身以上的元素。
因为这样会导致回溯，所以CSS一直几乎都没有这样的选择器。
防止回溯的原因是，浏览器最初设计的时候就考虑了渐进显示，也就是整个文档加载了多少就显示多少内容，而不用等整个下载完。
3、属性选择器
属性选择器允许用户自定义属性名称。
| 代码 | 说明 |
|---|---|
[attribute] |
元素有attribute属性。 |
[attribute="value"] |
属性attribute里是value |
[attribute*="value"] |
属性attribute里含有value |
[attribute~="value"] |
属性attribute里使用空白分开的字串里其中一个是value |
| `[attribute | ="value"]` |
[attribute^="value"] |
属性attribute里最前的是value |
[attribute$="value"] |
属性attribute里最后的是value |
3、伪类 / 伪元素选择器
官方文档的定义：css 引入伪类和伪元素概念是为了格式化文档树以外的信息。
(1) 伪类
:first-child、 :last-child 称为结构性伪类。
:link、:visited 称为链接伪类。
:hover、:active 和 :focus 称为动态伪类。
:enabled、:disabled、:checked 称为表单伪类。
:not() 称为反选伪类。
:target 称为 target 伪类。
伪类选择器可以叠加使用，例如：a:visited:hover {color:olive;}
(2) 伪元素
:before - 在元素的内容前面插入新内容。
:after - 在元素的内容之后插入新内容。
:first-letter - 向文本的首字母设置特殊样式。
:first-line - 向文本的首行设置特殊样式。
伪元素的特点：
1、伪元素不属于文档DOM节点。
2、伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件。
特别说下:before和:after：
可以搭配content属性，添加字符串作为输出。
添加的内容默认是inline元素，且只是单纯的字符串，不支持 html。
伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
三、CSS 层叠
1、层叠的概念
还记得前面提到的，CSS 的全程是 Cascading Style Sheets，这里 Cascading(层叠)的含义，包括两种：
1、样式的权重
2、样式的继承
2、样式权重
样式的权重导致：权重高的样式覆盖权重低的样式。
(1) 不同的来源
首先我们看下定义样式的不同来源：
1、用户样式
虽然规范中有，但从 chrome 33 起不支持了，而是建议使用扩展来实现。
2、内联样式
3、内部样式
4、直接外部样式
html 引入 <link rel="stylesheet" type="text/css" href="index.css"/> -->
5、间接外部样式
css 的 <style> 里用 @import 引入
6、浏览器（默认）样式
注意：
下面这两种写法是一致的：
<style>
#main {
background-color: red;
}
@import "index.css";
</style>
<style>
@import "index.css";
#main {
background-color: red;
}
</style>
因为会自动把 @import 提前，类似 js 里 var 可声明前置 （而 let 不行）。
(2) 选择器优先级值
一个元素可能会有多个来源、多个匹配的选择器（ 内联、内部还是外部[直接/间接] ）的样式。而针对这些选择器，都会有对应的可以计算出来的优先级值。
选择器优先级值是由 A 、B、C、D 四个参数来决定的，计算规则如下：
- 如果存在内联样式，那么
A = 1, 否则A = 0; B的值等于ID选择器出现的总次数;C的值等于类选择器和属性选择器和伪类出现的总次数;D的值等于标签选择器和伪元素出现的总次数 。
例如
#nav-global > ul > li > a.nav-link算出来的优先级值为(0, 1, 1, 3)。
计算出各个选择器的优先级值后，根据规则算出权重:
将优先级值从左往右依次比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。
如果全相等，则遵循后来居上的原则。
所以按照 选择器优先级值 算出的样式权重，除了内联的权重最高，其他的来源不同对权重没有任何影响。
(3) !important
规则：
1、!important 的权重 跟 选择器优先级值的权重 比有"一票否决权"。
2、!important之间的权重比较，跟 选择器优先级值 规则一样：
**先看来源：内联 > 内部 / 外部 [直接/间接] **
再看引入顺序：后来居上。
所以按照 选择器优先级值 算出的样式权重，除了内联的权重最高，其他的来源不同对权重没有任何影响。
注意：
**尽量避免使用 !important **。
千万不要在内联样式中使用 !important。
千万不要在你定义的插件里写 !important。
!important 类似 C 语言里的 goto 关键字，用着一时爽，实则隐患无穷。
3、样式继承
（1）自然继承规则
CSS 有的属性可以继承：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing。
有的属性不可继承：
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
且内联元素、块状元素、列表元素、表格元素的继承规则都不一样，很复杂。
且如果大量依靠自然继承规则，那么判断样式的来源就会变得困难。
（2）手动控制继承规则
inherit：继承父元素。initial：继承浏览器默认样式。unset：默认。若该元素有自然继承，则值为inherit；否则值为initial。revert：若用户定义样式表中有，则恢复此设置；否则，变成 unset。
