层叠样式表（CSS）允许您转换网页的外观。从字体和颜色到间距和整体布局，各种各样的设计工具就在您的指尖。尽管CSS是一门复杂的语言，但只有两个基本概念需要你理解才能开始。

这一切都是从准确地确定页面的哪一部分需要设置样式开始的。

css=选择器+声明

CSS文件包含一系列规则，描述HTML文件的格式。每一条规则都由两部分组成：设置什么样式以及如何设置样式。第一部分使用一系列称为“选择器”的术语进行控制

本文中的示例包括样式声明，但它们不是重点：选择器本身就是。

历史上，有三个CSS选择器级别（或版本）具有不同程度的浏览器支持。到2020年，根据CaniUse的数据，全世界99%以上的用户都可以使用。

一级选择器

一级介绍了四种基本类型的选择器，这些选择器涵盖了大量的情况，甚至在今天。

Pattern	Matches
电子	所有E元素
c	class=“c”的所有元素
#粘虫	id=“myid”的元素
埃弗	E元素中的F元素
伪类
E:链接	指向以前未访问过的页面的超链接
E:参观过吗	指向已访问页面的超链接
E:激活	当前选定的超链接
伪元素
E：：一线	E元素的第一个格式化行
E:第一个字母	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; }

选择符

HTML id属性在文档中应该是唯一的，例如，如果您有：

<div id="contents">…</div>

这应该是唯一具有“contents”id的元素。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; }

在这种情况下，优先权规则由其特殊性来定义，如下所示：

1. ID选择器（“contents”）是最具体的。
2. 类选择器（`.author`）没有那么具体。
3. 类型选择器（`p`）是最不特定的。

在计算特**时，只有两个选择者在较高级别上的得分相同时才考虑每个级别，因此“#contents”比“contents”更具体文章.新闻第。作者特别因为前者在ID选择器上“获胜”。

二级选择器

CSS选择器的下一个版本引入了属性选择器，扩展了伪类和伪元素，并添加了两个新的组合符。

Pattern	Matches
*	任何元素
E&gt；F公司	F元素E元素的子元素
E+F公司	紧跟在E元素前面的F元素
属性选择器
E[foo]	具有“foo”属性的E元素
E[foo=“bar”]	一个E元素，其“foo”属性正好是“bar”
E[foo~=“巴”]	一种E元素，其“foo”属性是一组以空格分隔的值，其中一个是“bar”
E[foo |=“en”]	一种E元素，其“foo”属性具有以“en”开头的以连字符分隔的值列表
伪类
E:第一个孩子	E元素，其父元素的第一个子元素
E:lang（法语）	“fr”语言中E类元素
伪元素
E：：之前	在E元素的内容之前生成的内容
E：：之后	在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”，例如。您不希望每个段落或粗体文本的边距都与整个文档相同。

相关：简单的CSS代码示例，你可以在10分钟内学会

一个好的经验法则是尽可能地以元素为目标，当一个简单的“body”选择器可以做到时，不要以每个元素为目标。

三级选择器

在这个级别中添加了更多的伪类，以及一些属性选择器和一个新的组合器。

Pattern	Matches
东方不败	前有E元素的F元素
属性选择器
E[foo^=“bar”]	一个E元素，其“foo”属性以字符串“bar”开头
E[foo$=“吧台”]	一个E元素，其“foo”属性以字符串“bar”结尾
E[foo*=“巴”]	一个E元素，其“foo”属性包含子字符串“bar”
伪类
E:根	一个E元素，文档的根
E:第n个孩子（n）	一个E元素，其父元素的第n个子元素
E:第n个孩子（n）	一个E元素，其父元素的第n个子元素，从最后一个开始计算
E:第n种类型（n）	一个E元素，它的第n个同级元素
E:类型（n）的第n个结尾	一个E元素，它的第n个同级元素，从最后一个元素开始计算
E:最后一个孩子	E元素，其父元素的最后一个子元素
E:第一种	一个E元素，它的第一个同级元素
E:最后一种	一个E元素，它的最后一个同级元素
E:独生子女	一个E元素，它的父元素的唯一子元素
E:仅适用于	一个E元素，只有它的同级元素
E:空的	没有子元素的E元素（包括文本节点）
E:目标	作为引用URI的目标的E元素
E:启用	启用的用户界面元素E
E:禁用	禁用的用户界面元素E
E:检查过了	一种被检查的用户界面元素E
E:不是	与简单选择器s不匹配的E元素

属性选择符

您可以选择属性以给定值开头的元素：a[href^=“https:”]，以给定值结尾的元素：img[src$=”.gif“]，或包含值：a[*=”value“]。

伪类

附加的伪类包括“：last child”、“：empty”（用于匹配没有内容的元素）和“：checked”，它们与复选框输入之类的元素匹配，但仅在选中时匹配。

一般同胞组合子：一个跟随的同胞

与级别2中相邻的兄弟组合符类似，它匹配任何紧随其后的兄弟，而不仅仅是下一个：

h1 ~ p { font-size: 110%; }

css选择器及其使用方法

现在您已经知道了关于如何使用CSS选择网页的一部分的所有内容。现在您已经准备好使用各种CSS属性来为页面样式，这些属性涵盖了从颜色到布局的所有内容。

图片来源：Pankaj Patel/Unsplash