朝花夕拾《精通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或者以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 四个参数来决定的，计算规则如下：

1. 如果存在内联样式，那么 A = 1, 否则 A = 0;
2. B 的值等于 ID选择器 出现的总次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4. 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。