『云陪读』 - 《精通CSS》第2章 添加样式

[verymuch]

本书《精通CSS》之前的章节：

• 第1章 基础知识

---

有效且结构良好的文档是添加样式的基础。上一章，我们一起学习了相关的知识。现在是时候学习一下如何添加样式了。

本章笔者在读完之后，根据原文的解构做了一些调整，主要包括选择器及其详解、层叠与特异性及继承、以及如何应用样式，最后延伸了一下性能的知识。希望你看完之后能够有收获。

2.1 CSS选择器

首先，为了让大家对于选择器有一个总的概念。我将CSS选择器分为：独立选择器和组合选择器。

独立选择器是指有着明确定义的独立的选择器。组合选择器是独立选择器的各种组合。

独立选择器：

选择器	格式	描述
类型(标签)选择器	<elename>	这种基本选择器会选择所有匹配给定元素名的元素。如input 将会选择所有的 <input> 元素。
类选择器	.classname	这种选择器会选择所有class属性中包含给定值的元素。如.intro会选中所有class中包含intro（必须是空格分隔完整的intro）的元素。
ID选择器	#idname	这种选择器会选择所有id属性与之匹配的元素。需要注意的是一个文档中每个id都应该是唯一的。
通用选择器	*	这个选择器会选择所有节点。它也常常和一个名词空间配合使用，用来选择该空间下的所有元素。如.xxx-section > *表示.xxx-section下面的所有直接子元素。
属性选择器	[attr]	属性选择器会根据元素的属性来匹配，还有好几种变种，后面会有一小节会详述。
伪元素选择器	::pseudo-element	有时，我们想选择的页面区域不是通过元素表示的，我们可以通过伪元素这一特殊的选择器来选择。
伪类选择器	:pseudo-class	页面中的元素会有一些特殊的状态，如超链接的状态和表单元素的状态，我们可以通过伪类选择器来选择。

通用选择器可以用来清除所有元素的默认内外边距，如 * {padding: 0; margin: 0;}。

不过更推荐大家使用重设样式的库，如Eric Meyer的CSS Reset和Nicolas Gallagher的Normalize.css。

组合选择器：

组合选择器顾名思义，是两个及以上的独立选择器的组合。所以，每个组合选择器会涉及至少两个独立选择器和一个组合子。为了便于表述，下面我们分别用s1/s2/s3表示独立选择器。

选择器	组合子	格式	描述
分组选择器	,	s1, s2, s3	这个是笔者自己加的，为了防止有的初学者不知道如何同时给多个选择器同时应用样式。逗号分隔的多个选择器会分别独立应用。
后代选择器	空格	s1 s2	选择器之间用空格分隔。用于选择某个元素或者某组元素的后代。
子选择器	>	s1 > s2	子选择器与后代选择器不同，它只会选择s1选择器的直接后代的s2，如 section > p只会选择是section元素直接子元素的p元素。
相邻同辈选择器	+	s1 + s2	相邻同步选择器，只会选在紧跟s1之后的s2，s1和s2为兄弟节点。如h2 + p只会选择标题后面的第一个p段落。
一般同辈选择器	~	s1 ~ s2	除了可以选择相邻的兄弟节点，还可以选择s1之后非紧跟（包含紧跟的）的兄弟节点s2。如h2 ~ p会选择所有h2元素后的段落。

如果你好奇为什么有相邻同辈选择器和一般同辈选择器，却没有可以选择前面的元素的选择器？原因如下：

浏览器之所以不支持向前选择同辈元素，主要是因为网页渲染性能的关系。

通常情况下，浏览器会按照元素在页面中出现的先后次序来给他们应用样式。如果存在向前同辈选择器，那么再给h2前面的段落应用样式时，h2自身还不存在，这时浏览器就得先记住这一选择器，然后对文档进行多轮处理才能彻底应用样式。

已经有人提出了向前同辈选择器的建议，也正考虑接纳为标准，不过这应该只会用于特殊用途（如JavaScript中求值），和我们想要的不一定一样。

到这里，我们总览了一下CSS选择器，如果你对其中细节已经了解，那就跳过第一节，直接前往2.2 层叠。

不跳过的同学，我们继续属性选择符、伪元素和伪类。

2.1.1 属性选择器

前面介绍了什么是属性选择器，也提到了有几种变种。下面我们来看下具体的用法。

1. 匹配元素存在某些属性，通过方括号包裹住属性即可，如abbr[title]会匹配存在title属性的abbr元素。
2. 匹配元素属性等于某个值时，属性后接等号和值即可，如input[type="submit"]，会匹配type为submit的input。
3. 匹配以某些字符开头的属性值，在等号前加上插入符(^)，如a[href^="http://"]。
4. 匹配以某些字符结尾的属性值，在等号前加上美元符号($)，如img[src$=".jpg"]。
5. 匹配包含某些字符的属性值，在等号前面加上星号(*)，如a[href*="/about/"]。
6. 匹配以空格分隔的字符串中的属性值（如rel属性的值），在等号前面加波浪号(~)，如a[ref~="next"]。
7. 匹配是指定值或开头是指定值后连着一个短划线的属性值，在等号前面加竖线(|)，如a[lang|="en"]，可以匹配属性值en和en-us。理论上，这个选择器可以用于class属性，如匹配message和message-error。但如果message类的前面或后面又添加了别的类名，如class="box message"/class="message box"/class="messagebox"，这个选择符都会失效。

2.1.2 伪元素

在涉入前端之初，大家一定被问到过伪元素和伪类的区别是什么。在展开之前，我们先来看看这个问题。

伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。

伪元素会创建一个抽象的伪元素，这个元素不是 DOM 中的真实元素，但是会存在于最终的渲染树中(并不是全都会存在于树中，后面会提到)，我们可以为其添加样式。

最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的 DOM 节点。

此外就是写法上的区别，伪类是使用单冒号:，伪元素使用是双冒号::。

因为之前学习W3C的标准CSS Pseudo-Elements Module Level 4总结了一篇关于伪元素的文章，所以这里我就不展开说了，展开的话就多了，原文书里也就一页的篇幅，大家感兴趣可以到我之前的文章(细数最新的CSS伪元素及其用法 )看下详情。

下面是一些总览性的内容。

伪元素可以分为三类，如下：

1. 排版伪元素，主要是跟页面排版相关的伪元素，包括::first-line/::first-letter

::first-line/::first-letter还是很复杂的，强烈推荐看原文。

2. 突出显示类伪元素，主要用于在页面上通过更加突出的方式表现元素，包括有效的选择::selection、无效的选择::inactive-selection、拼写错误::spelling-error、语法错误::grammar-error。

3. 最后是存在于元素树中的伪元素：树中伪元素。包括内容生成伪元素::before/::after、列表项标记伪元素::marker以及输入框占位伪元素::placeholder。

并不是所有的伪元素都是在元素树中的哟。

2.1.3 伪类

1. 适用于超链接的伪类

常见的HTML元素的基础样式表中，经常能看到下面这些关于超链接的样式。

如下：

/* 未访问过的链接未蓝色 */
a:link {
  color: blue;
}
/* 访问过链接未绿色 */
a:visited {
  color: green;
}
/* 链接在鼠标悬停或获取键盘焦点时（tab健）为红色 */
a:hover,
a:focus {
  color: red;
}
/* 活动状态（鼠标点击或键盘回车选择链接）时为紫色 */
a:active {
  color: purple;
} 

这几个伪类的先后次序很重要。:link和:visited应该排在前面，然后是与用户交互相关的:hover、:focus、:active。

其中如果:visited在:link前面，就会导致:visited的样式不会应用，因为会被:link覆盖。其他的顺序也同样，大家体会下就行。

除了链接之外，表单字段和按钮也是交互元素，这些伪类也适用于它们。还可以使用JavaScript把其他元素变成交互元素。对于:hover，很多元素都可以使用。

不过要注意的是，在触摸屏和键盘等输入方式下不一定有真的悬浮状态，所以不要在重要的交互功能中使用:hover。

2. 目标:target和反选:not

:target可以匹配这样的元素：有一个ID属性，且该属性的值出现在当前页面URL的hash部分，即#后面的值。

如我们打开链接http://example.com/blog/1/#comment-3，找到如下元素<article class="comment" id="comment-3">...</article>，可以通过以下规则高亮该评论：

.comment:target {
  background-color: #fffec4;
}

除了可以匹配链接锚点定位的元素，还可以使用反选伪类:not()来排除某些元素。

如，我们可以通过:not()高亮一个评论，但这条评论不能是被评论否决的。

.comment:target:not(.comment-downvoted) {
  background-color: #fffec4;
}

反选伪类的括号中可以放入各种选择选择器，但是伪元素和它自身除外。

3. 结构化伪类

下面的四个可以接受参数的伪类，都支持关键字(奇数odd/偶数even)、数值(表示目标元素的序数位置)以及数值表达式(如2n，2n+1)。

注意，目标元素的起始计数为1，数值表达式中n会逐次进行迭代，从0开始，然后1，2，3...

结构化伪类	功能
:nth-child(N)	匹配满足表达式的子元素，通常用于交替给表格应用样式。如tr:nth-child(2n)和tr:nth-child(even)都会匹配序号为偶数的表格行元素。
:nth-last-child(N)	如:nth-child()类似，但是元素的序数计算末尾开始为1，倒着计算。
:first-child	选择是第一个子元素的元素，相当于:nth-child(1)
:last-child	选择是最后一个子元素的元素，相当于:nth-last-child(1)
:only-child	选择是唯一子元素的元素
:nth-of-type(N)	匹配满足表达式的指定类型(这里的类型不是指标签类型，是选择器)的子元素。会过滤掉其他非指定类型，再根据表达式应用样式。
:nth-last-of-type(N)	匹配满足表达式的指定类型(这里的类型不是指标签类型，是选择器)的子元素。会过滤掉其他非指定类型，再根据表达式应用样式。但是元素的序数计算是从末尾开始的。
:only-of-type	选择指定类型的唯一子元素

基于元素数目添加样式有很多你可能不知道的小技巧，如果你感兴趣，可以参考Heydon Pickering的Quantity Queries for CSS

4. 表单伪类

除了第一部分用于超链接的伪类可以用于表单之外，还要一些常见的伪类可以用于表单。

:required/:optional可以分别用于必填的和非必填的表单项。

:disabled/:read-only/:read-write可以用于被禁用/只读/可读写的表单项。

:valid/:invalid当输入有效/无效时应用样式。

:in-range/:out-of-range用于type为number的input输入在范围内和超出范围时应用样式。

书中有很多没有提到的新伪类选择器，大家感兴趣的话可以参考之前同事写的另一篇文章盘点CSS_Selectors_Level4_中新增的选择器。大家也可以参考一下MDN的文档。

2.2 层叠

CSS，全称Cascade Style Sheet，层叠样式表。层叠是CSS最核心的概念。之所以到现在才介绍，是因为选择器是基础，没有选择器说个啥的层叠。

稍微复杂的样式表中就可能会存在两条或多条规则同时匹配一个元素的情况，CSS就是通过层叠机制来处理这种冲突的。

层叠的原理是为规则赋予不同的重要程度。

层叠的重要性级别从高到低如下所示：

1. 标注!important的用户样式；
2. 标注!important的作者样式；
3. 作者样式；
4. 用户样式；
5. 浏览器（或用户代码）的默认样式。

其中作者样式是网站开发者定义的样式，用户样式是用户通过浏览器设置的自定义样式。

之所以带有!important的用户样式高于带有!important的作者样式，是为了给一些特殊用户(如无障碍交互)或者特殊用途下，让用户能够覆盖作者样式。

当样式规则存在冲突时，先通过层叠的重要性来区分，然后按选择器的特殊性来排序。特殊性高的选择器会覆盖特殊性低的选择器。如果两条规则的特殊性相同，则后定义的规则优先。

2.3 特殊性

特殊性，也被称作特异性或者权重，有很多叫法，我们只要知道是啥就行了。

相信入了前端坑的各位一定被问过相关的问题，那么你掉过坑吗？

为了量化规则的特殊性，每种选择器都对应一个数值，如此，一条规则的特殊性就等于每个选择器的累加数值。

但是累计的时候，不是我们所熟悉的10进制，而是基于位置的累加。也就是10个(20个甚至更多)类选择器的特殊性也不会高于1个ID选择器（划重点，有些人就是掉这个坑里了）。

任何选择符的特殊性都对应于如下4个级别，即a、b、c、d：

• 行内样式(写在style属性里的样式)，a为1；
• b等于ID选择器的个数；
• c等于类选择器、伪类选择器以及属性选择器的个数；
• d等于类型选择器和伪元素选择器的个数。

如上行内样式的特殊性最高，然后通过ID选择器应用的规则高于其他选择器应用的规则，通过类选择器应用的规则高于类型选择器应用的规则。

注意，通用选择器(*)的特殊性为0，无论它在规则声明中出现多少次。不过也会存在意外情况，后面会提到。

在CSS的开发中，样式规则会变得越来越多，特殊性也各有不同。这就导致，当我们添加新的样式时，有可能会因为特殊性的问题而被覆盖，这是就需要手动的增加特异性。

当这么做会让过这一问题越来越严重。所以正确的做法是：从一开始就简化选择器、降低特殊性。

此处，再一次推荐大家选择并使用一种CSS方法论，如（BEM，OOCSS，SUIT，SMACSS，ITCSS，Enduring CSS等）。使用同一的规范来编写CSS会帮助我们简化选择器，降低特殊性。

最后，在大的网站中，每个元素所应用的规则会有很多，其特殊性也比较复杂。当我们预想中的样式没有生效时，可以借助浏览器来查看元素（如Chrome中右键“检查元素”），可以看到元素匹配的所有CSS选择器及规则，包括浏览器默认样式以及下面要说的继承样式。

2.4 继承

有些属性，如颜色或字体大小，会被应用它们的元素的后代所继承。比如，我们把body元素的文字颜色设为黑色，那么body内所有后代元素的文字颜色都会继承这个黑色，字号也一样。

如果在body上设置了一个字号，你会发现标题并不会继承同样的字号。这是因为标题的字号大小是浏览器默认样式设定的。任何直接应用给元素的样式都会覆盖继承的样式，继承的样式没有任何特殊性。

继承的样式没有任何特殊性，甚至连0都算不上。所以使用特殊性为0的通用选择器设置的样式也会覆盖继承的样式。

因此，我们会遇到如下（前面提到的）意外情况。

HTML:

<h2>The emphasized text will be <em>black</em></h2>

CSS:

* {
  color: black;
}
h2 {
  color: red;
}

效果如下图所示，表面上看em会继承h2的红色，但是通用选择器所设置的黑色会覆盖它所继承的红色。

如果要得到想要的结果，可以给body设置一个基准色，而不是通过通用选择器设置。这样所有子元素都会继承这个颜色，而不是设置为这个颜色。

2.5 为文档应用样式

我们可以通过4种方式将编写的CSS样式应用到HTML文档中。

1. <style>元素

首先，我们可以把样式放在<style>元素中，直接放在文档的<head>标签内。

<style>
  body {
    font-size: 14px;
    color: grey;
  }
</style>

通常情况下，当样式不多，我们希望立刻应用它们，且不想浏览器额外下载文件而耽误时间时，可以使用这种方式。

2. <link>元素

不过，更多的样式表是可以在多个页面重用的，所以最常用的方式还是使用<link>元素来引入样式。

<link href="/c/base.css" rel="stylesheet" />

3. @import指令

最后，还可以通过@import指令加载外部CSS。

<style>
  @import url("/c/modules.css");
</style>

也可以在<link>引入的文件内使用 @import指令。

表面上看，<link>和@import没啥区别，但其实区别还是很大的，并且不推荐使用@import。

比如，只用一个link元素加载CSS文件，然后在其中使用@import并不会只有一个HTTP请求，反而需要先下载一个CSS文件，然后再要额外发送一个请求获取导入的文件。

此外，多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。所以不建议使用这一方式。

2.6 CSS性能

原书中提到了性能相关的内容，但是CSS性能相关的内容，这一部分内容如果展开说的话会很多，所以这里推荐大家几个链接，有我之前写的，也有之前同事写的。欢迎跳转查看。

• CSS性能优化的8个技巧
• 浏览器缓存策略之扫盲篇
• 关键渲染路径
• 优化关键渲染路径

读后语

万万没想到，这一章包含了这么多面试点，你get到了吗？没有的话欢迎评论讨论~！

---

你多久没有读完一本技术书了？ 你是否列了长长的待读书单，却迟迟没有行动？ 你是否每逢购物节，就血拼了一堆回来？ 又或者你觉得一个人读书太过枯燥？ 如果你是，那从现在跟歪马一起，歪马陪你一起云读书。 歪马会选一本技术类书籍，每2~5天学习并总结一个章节供大家一起围观，欢迎大家监督共进，后期大家可以推荐选材，内容局限于前端周边🤓。

---

如果你喜欢，欢迎扫码关注我的公众号，我会定期陪读，并分享一些其他的前端知识。