级联样式表（CSS）使您可以改变网页的外观。从字体和颜色到间距和整体布局，各种设计工具唾手可得。尽管CSS整体上是一门复杂的语言，但是开始时只需要了解两个基本概念。
这一切都始于准确确定要设置页面样式的哪一部分。
CSS =选择器+声明
CSS文件包含描述如何格式化HTML文件的一系列规则。每个规则包括两个部分：样式设置以及样式设置。第一部分使用一系列称为“选择器”的术语进行控制。
本文中的示例包括样式声明，但它们不是重点：选择器本身是。
历史上，存在三个CSS选择器级别（或版本），它们具有不同程度的浏览器支持。根据Can I Use的资料，到2020年，全球超过99％的用户都可以使用这些工具。
1级选择器
1级介绍了四种选择器的基本类型，它们涵盖了很多情况，即使在今天也是如此。
| 模式 | 火柴 |
|---|---|
E |
所有E元素 |
.c |
所有带有class =“ c”的元素 |
#myid |
id =“ myid”的元素 |
EF |
E元素内的F元素 |
| 伪类 | |
E:link |
指向以前未访问过的页面的超链接 |
E:visited |
指向已访问页面的超链接 |
E:active |
当前选择的超链接 |
| 伪元素 | |
E::first-line |
E元素的第一行 |
E::first-letter |
E元素的第一个格式化字母 |
类型选择器
最简单的选择器是“类型选择器”。它针对元素的所有实例，例如段落或粗体文本：
p { margin-bottom: 0; }
b { font-family: sans-serif; }
类选择器
class属性允许将其他语义（例如特定类型的段落）添加到HTML元素。可以在CSS中选择以下元素：
.intro { font-weight: bold; }
该选择器将匹配：
<p class="intro">…</p>
但请注意，它也将匹配：
<ul class="intro">…</ul>
如果只希望将其应用于介绍性段落，则可以将类型选择器和类选择器结合使用：
p.intro { font-weight: bold; }
ID选择器
HTML id属性在文档中应该是唯一的，例如，如果您具有：
<div id="contents">…</div>
那应该是唯一具有“内容”标识的元素。使用ID选择器可以定位文档中的特定元素：
#contents { color: #333; }
后代选择器
严格来说，是一个“组合器”，因为此选择器是关于其他两个之间的空间的。 HTML是分层的，如我们在DOM概述中所述。后代选择器允许一个元素通过另一个元素内的上下文来标识：
table b { font-weight: normal; }
伪类和元素
伪选择器将目标对象明确定义为不存在但可以使用的类或元素。将它们视为特殊内容奖励：
p::first-line { text-transform: uppercase; }
选择器列表
如果要对每个选择器应用相同的规则，请使用逗号将选择器组合到列表中。代替：
th { padding: 1em; }
td { padding: 1em; }
你可以写：
th, td { padding: 1em; }
特异性
样式表是一系列使用选择器来匹配元素的规则，但是当多个规则匹配给定元素时会发生什么？由此产生的行为受“特殊性”支配，“特殊性”定义了在以下情况下使用的规则：
p.intro { color: black; }
p { color: gray; }
在这种情况下，优先级规则由其特定性定义，如下所示：
- ID选择器（#contents）是最具体的。
- 类选择器（.author）不太具体。
- 类型选择器（`p`）是最不具体的。
在计算特异性时，仅当两个选择器在较高级别上具有相同分数时才考虑每个级别，因此“ #contents”比“ article.news p.author.special”更具体，因为前者在ID选择器上“获胜”。
2级选择器
CSS选择器的下一修订版引入了属性选择器，在伪类和伪元素上进行了扩展，并添加了两个新的组合器。
| 模式 | 火柴 |
|---|---|
* |
任何元素 |
E > F |
E元素的F元素子元素 |
E + F |
F元素紧跟在E元素之后 |
| 属性选择器 | |
E[foo] |
具有“ foo”属性的E元素 |
E[foo="bar"] |
一个E元素，其“ foo”属性恰好是“ bar” |
E[foo~="bar"] |
一个E元素，其“ foo”属性是由空格分隔的值的列表，其中一个是“ bar” |
E[foo|="en"] |
一个E元素，其“ foo”属性具有以连字符分隔的以“ en”开头的值的列表 |
| 伪类 | |
E:first-child |
一个E元素，其父元素的第一个孩子 |
E:lang(fr) |
语言“ fr”中类型E的元素 |
| 伪元素 | |
E::before |
在E元素的内容之前生成的内容 |
E::after |
在E元素的内容之后生成的内容 |
通用选择器
“ *”匹配任何元素。它通常没有那么有用，但是例如，如果您想重置任何默认边距，可以这样做：
* { margin: 0; }
属性选择器
通过属性选择器，可以非常明确地指定样式，并通过元素的属性进行过滤：
a[title] { text-decoration: underline dotted; }
儿童组合器：直接在另一个内部的元素
与后代组合器类似，但此子代仅匹配直接子代，而不匹配树下的任何后代。例如，“ ul> li”将仅与此处的“ Section 1”文本匹配，而不与“ Section 1.1”匹配：
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
相邻的同级组合器：下一个同级
h1 + p { font-weight: bold; }该选择器通常用于控制边距或不带特定类的介绍性段落，通常仅在紧随另一个元素时才匹配一个元素。在示例中，此处仅第一段将被匹配，第二段则不匹配：
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
请注意，在选择下一个同级对象时，此选择器仅考虑元素，而不考虑文本。
遗产
一些CSS属性从祖先元素继承其值。在实践中，这意味着，例如，设置“ body”元素的字体表示每个段落，表格等也使用相同的字体。
当然，这正是您所期望的，但是请考虑一个不继承的属性：例如“ margin”。您不希望每个段落或一小段粗体文本都与整个文档具有相同的页边距。
一个好的经验法则是尽可能合理地定位元素-当简单的“ body”选择器可以定位每个元素时，不要定位每个元素。
3级选择器
在此级别中添加了更多的伪类，以及一些属性选择器和新的组合器。
| 模式 | 火柴 |
|---|---|
E ~ F |
F元素后跟E元素 |
| 属性选择器 | |
E[foo^="bar"] |
一个E元素，其“ foo”属性以字符串“ bar”开头 |
E[foo$="bar"] |
一个E元素，其“ foo”属性以字符串“ bar”结尾 |
E[foo*="bar"] |
一个E元素，其“ foo”属性包含子字符串“ bar” |
| 伪类 | |
E:root |
E元素，文档的根 |
E:nth-child(n) |
一个E元素，其父元素的第n个子元素 |
E:nth-last-child(n) |
一个E元素，是其父元素的第n个子元素，从最后一个元素开始计算 |
E:nth-of-type(n) |
E元素，其类型的第n个同级 |
E:nth-last-of-type(n) |
一个E元素，其类型的第n个同级，从最后一个元素开始计算 |
E:last-child |
E元素，其父元素的最后一个子元素 |
E:first-of-type |
E元素，其类型的第一个同级 |
E:last-of-type |
一个E元素，其类型的最后一个兄弟 |
E:only-child |
E元素，其父元素的唯一子元素 |
E:only-of-type |
一个E元素，仅其类型的同级 |
E:empty |
没有子元素（包括文本节点）的E元素 |
E:target |
E元素是引用URI的目标 |
E:enabled |
已启用的用户界面元素E |
E:disabled |
禁用的用户界面元素E |
E:checked |
被检查的用户界面元素E |
E:not(s) |
与简单选择器不匹配的E元素 |
属性选择器
您可以选择具有以给定值开头的属性的元素： a[href^="https:"] ，以给定值结尾的： img[src$=".gif"]或包含值： a[*="value"] 。
伪类
其他伪类包括“：last-child”，“：empty”（以匹配没有内容的元素）和“：checked”，该元素与复选框输入等元素匹配，但仅在选中时才匹配。
普通同级组合器：后续同级
类似于第2级的相邻同级组合器，它匹配后继出现的任何同级，而不仅仅是下一个同级：
h1 ~ p { font-size: 110%; }
CSS选择器及其用法
现在，您几乎了解了如何使用CSS选择网页的一部分。现在，您可以使用各种CSS属性来设置页面样式，这些CSS属性涵盖从颜色到布局的所有内容。
图片来源：Pankaj Patel / Unsplash