2 / 20

CSS 选择器 | 自在学

CSS 选择器

CSS 选择器是网页样式设计中至关重要的基础工具。它允许我们以声明性的方式，精准地选中页面上的特定元素，并对这些元素应用一致的样式规则。例如，若需统一调整多家分店菜单中菜品价格的颜色，无需逐个页面修改，只需通过相应的选择器，即可高效地实现全局样式的同步更改。

CSS 选择器

选择器的最大意义在于提高页面样式管理的专业性与效率，使开发者能够专注于整体设计和用户体验优化，避免手动操作带来的重复性和易错性。通过合理运用不同类型的 CSS 选择器，我们能够轻松管控网站的结构与视觉风格，实现高度可维护和可扩展的样式架构。

实验室

你可以在这个实验室中自由地操作观察样式的变化，从而加深对 CSS 的理解，或者你也可以先跳过这个实验室，学习完理论知识后再回来尝试。

类型选择器

类型选择器是最基础也最常用的选择器类型。它直接使用 HTML 元素的标签名来选择元素，就像是在人群中直接叫出某个人的名字一样。当你使用 h1、p、a 等标签名作为选择器时，你就是在使用类型选择器。

让我们用一个旅游博客的例子来深入理解类型选择器的工作原理。假设你正在制作一个关于“江南水乡”的旅游网站，你希望不同类型的元素有不同的样式来营造江南的韵味。

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>江南水乡游记</title>
  <style>
    h1 {
      color: #2c5530;
      font-family: "楷体", serif;

在这个例子中，我们使用了四种不同的类型选择器。h1 选择器让主标题使用深绿色和楷体字体，营造古典氛围；h2 选择器为二级标题添加了底部边框，增强层次感；p 选择器设置了段落的行高和首行缩进，提高可读性；a 选择器为链接设置了蓝色，并在鼠标悬停时改变颜色和下划线。

类型选择器的优势在于它的简洁性和直观性。当你看到 h1 { color: blue; } 时，你立即就能理解它的含义：让所有的一级标题变成蓝色。

类型选择器会选中页面中所有匹配的元素。如果你只想对特定的标题应用样式，就需要使用更精确的选择器，比如类选择器或 ID 选择器。

选择器分组

在日常的网页开发中，我们经常会遇到需要对多个不同 HTML 元素应用相同样式的场景。例如，在新闻网站或者内容平台的页面设计中，通常希望所有的标题（即 h1、h2、h3、h4、h5、h6）都使用统一的字体、颜色和边距，以保证整体视觉风格的一致性与专业感。如果不采用分组选择器，就必须为每一个标题标签分别书写一段 CSS 规则，这不仅导致重复劳动，增加代码量，还会让样式维护变得十分低效和易错。类似于下面这样：

|
h1 { font-family: "微软雅黑", sans-serif; color: #1a1a1a; }
h2 { font-family: "微软雅黑", sans-serif; color: #1a1a1a; }
h3 { font-family: "微软雅黑", sans-serif; color: #1a1a1a; }
h4 { font-family: "微软雅黑", sans-serif

分组选择器详解

分组选择器是 CSS 中的一种高效写法，它允许开发者将多个选择器用逗号,连接，统一为这些选择器指定一组样式声明。这样，任何符合这些选择器的元素都会同时应用到这套样式。可以理解为让多个 HTML 元素“组团”接收同一个样式指令，从而极大提升开发效率并降低后期维护成本。举例说明：假如你希望 h1 到 h6 所有标题元素都统一为相同的字体和颜色，只需要这样写：

|
h1, h2, h3, h4, h5, h6 {
  font-family: "微软雅黑", sans-serif;
  color: #1a1a1a;
}

这样，无论页面中有多少种标题级别，只需一句 CSS 声明，即可一次性完成统一样式设置。下面，我们通过一个新闻门户网站的实际案例，看看分组选择器在真实项目中的应用效果：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>今日新闻</title>
  <style>
    /* 使用分组选择器统一样式 */
    h1, h2, h3, h4, h5, h6 {

在这个例子中，h1, h2, h3, h4, h5, h6 这个分组选择器告诉浏览器：“对于所有这些标题元素，都应用相同的字体、颜色和下边距。”然后我们为每个级别单独设置了不同的字体大小，这样既保持了视觉一致性，又体现了层次结构。

分组选择器可以让你一次性为多个选择器应用相同的样式，从而避免重复代码，提高代码的可读性和可维护性。

通配选择器

通配选择器使用星号（*）来表示，它能够匹配页面中的任何元素，就像是一个万能钥匙。通配选择器通常用于重置样式或者设置全局默认值。

|
/* 重置所有元素的默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
/* 设置全局字体 */
* {
  font-family: "思源黑体", sans-serif;
}

通配选择器特别适用于现代网页开发中的样式重置。不同的浏览器对 HTML 元素有不同的默认样式，通配选择器可以帮助我们创建一个统一的起点。

使用通配选择器时要特别小心，因为它会影响页面中的每一个元素。过度使用可能会导致性能问题，或者意外地覆盖了其他重要的样式。

声明分组

除了可以分组选择器，我们还可以分组样式声明。这意味着我们可以为一个选择器应用多个样式属性，让代码更加紧凑和易读。我们可以将多个样式属性组合在一起，类似于下面这样：

|
h1 {
  font-family: "微软雅黑", sans-serif;
  color: #1a1a1a;
  font-size: 2.5em;
  margin-bottom: 0.5em;
  text-align: center;
  border-bottom: 3px solid #0066cc;
  padding-bottom: 10px;
}

这种写法比分别写多个规则要清晰得多：

|
h1 { font-family: "微软雅黑", sans-serif; }
h1 { color: #1a1a1a; }
h1 { font-size: 2.5em; }
h1 { margin-bottom: 0.5em; }
h1 { text-align: center; }
h1 { border-bottom: 3px solid #0066cc

声明分组不仅让代码更简洁，也让相关的样式属性聚集在一起，便于理解和维护。当你需要修改某个元素的样式时，所有相关的属性都在同一个地方，不需要在多个规则之间跳转。

在声明分组中，每个样式属性之间用分号分隔，最后一个属性后面的分号是可选的，但建议保留，这样在添加新属性时不会忘记添加分号。

类选择器与 ID 选择器

虽然类型选择器（比如直接用 h1、p 等）简单易用，但它们在实际项目中往往无法满足更复杂和精细的样式需求。举个例子：假设你正在开发一个电商网站，商品列表里有“特价”、“新品”、“热销”等多种标签。你希望这些标签分别呈现不同的颜色——比如“特价”用醒目的红色、“新品”用清爽的绿色、“热销”用亮眼的橙色。如果此时仅仅依赖类型选择器，仅能选中如 <span> 之类的通用标签，却无法细致地区分这些不同状态的标签，自然就实现不了这样的需求。

这时，类选择器（class selector）和 ID 选择器（ID selector）就派上了用场。通过为 HTML 元素添加 class 或 id 属性，你可以非常精确地选中某一类或者某一个特定元素，从而赋予它们独特的样式。这让你的 CSS 拥有了更强大的定制能力，可以针对页面中的各种特殊元素单独设计样式，而不会影响其他同类型的元素。

类选择器基础

类选择器是最常用的选择器之一。它通过在类名前加一个英文句点（.），就能选中页面上所有拥有指定类名的元素。打个比方，这就好比在茫茫人群中寻找所有戴着红色帽子的人——无论他们穿什么衣服、是什么身份，只要头上有红色帽子，就会被一眼选中，非常高效和灵活。为了让你更好地理解类选择器的用法，我们用一个简单的水果分类例子：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>水果分类</title>
  <style>
    /* 基础标签样式 */
    .tag {
      display: inline-block;
      padding: 4px 8

在这个简单的例子里，我们创建了3种颜色的标签：红色、黄色和绿色。每个水果都用对应的颜色标签来分类。这展示了类选择器的基本用法——给元素添加类名，然后用CSS选择器来控制样式。

多类名怎么用？

实际开发中，经常遇到一个元素要用多个类名的情况。HTML 允许一个标签上写多个类名，类名用空格隔开。例如：class="tag new hot"。下面用一个简单的例子，展示多类名组合的用法：

|
/* 基础按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
 
/* 按钮颜色 */
.btn-blue {
  background-color: #007bff;
  color: white

现在我们可以组合这些类来创建不同样式的按钮：

|
<button class="btn btn-blue">蓝色按钮</button>
<button class="btn btn-red btn-big">红色大按钮</button>

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类名组合示例</title>
  <style>
    .btn {
      padding: 8px 16px;
      border: none;

多类名组合让我们能够创建模块化的样式系统，每个类负责一个特定的样式方面（大小、颜色、状态等），然后通过组合来创建最终的视觉效果。这种方法让样式更加灵活和可维护。

ID 选择器

ID 选择器使用井号（#）加上 ID 名来选择元素。与类选择器不同，ID 选择器用于选择页面中唯一的元素，就像是一个人的身份证号码一样，每个 ID 在页面中只能出现一次。让我们用一个简单的例子来说明 ID 选择器的使用：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ID 选择器示例</title>
  <style>
    /* 使用 ID 选择器给元素添加样式 */
    #title {
      color: blue;
      font-size: 24px;

在这个简单的例子中，我们看到了 ID 选择器的基本用法：

#title 选择器让标题变成蓝色，居中显示
#description 选择器让段落变成绿色，并添加了背景色
#highlight 选择器让特定的词变成红色粗体，并添加黄色背景

ID 选择器用 # 符号开头，后面跟着元素的 id 属性值。每个页面中只能有一个元素使用相同的 id，所以 ID 选择器总是选择唯一的元素。

类与 ID 的选择

在实际开发中，我们经常需要在类选择器和 ID 选择器之间做出选择。这个选择不仅影响样式的应用，也影响代码的可维护性和可扩展性。让我们用一个简单的书架系统来对比这两种选择器的使用场景：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的书架</title>
  <style>
    /* 使用类选择器 - 可复用的书籍样式 */
    .book {
      border: 1px solid #ddd;
      border-radius:

在这个简单的例子中，我们使用类选择器来定义可复用的书籍样式。.book 类可以被多个书籍使用，而 .fiction 和 .science 类可以添加到特定的书籍上来显示不同颜色。

另一方面，我们使用 ID 选择器来定义页面中的唯一区域，比如页面的标题区域（#header），这种区域在页面中只出现一次，使用 ID 选择器是合适的选择。

选择类选择器还是 ID 选择器的经验法则：如果你需要样式化多个相似的元素，使用类选择器；如果你需要样式化页面中唯一的元素，使用 ID 选择器。

属性选择器

属性选择器是 CSS 中一个非常强大但经常被忽视的功能。它们允许我们根据 HTML 元素的属性值来选择元素，这为我们提供了比类选择器和 ID 选择器更灵活的选择方式。想象你正在制作一个文档管理系统，你需要为不同类型的文件（PDF、Word、Excel）添加不同的图标，或者为外部链接添加特殊标识。属性选择器就是解决这类问题的完美工具。

简单属性选择器

简单属性选择器可以让我们选中所有带有某个特定属性的 HTML 元素，而无需关心属性值具体是什么。这有点像在图书馆里查找那些插着书签的书，无论书签长什么样，只要有这个标记就能被快速识别出来。

让我们用一个简单的任务列表来展示属性选择器的用法：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>任务列表</title>
  <style>
    /* 为有checked属性的复选框添加样式 */
    input[type="checkbox"][checked] {
      accent-color: #28a745

在这个简单的例子中，我们展示了属性选择器的基本用法：

input[type="checkbox"][checked] 为已选中的复选框添加绿色样式
button[disabled] 为禁用的按钮添加灰色样式
[title] 为有title属性的元素添加虚线下划线和帮助光标

属性选择器让我们可以根据HTML元素的属性来选择和样式化它们，而不需要添加额外的类名。

精确值匹配

精确值匹配，是属性选择器里最常用的一种写法。它的意思是：只有当某个元素的属性值和我们指定的内容一模一样，它才会被选中、应用样式。你可以把它想象成在图书馆找书——只有书的编号完全符合要求，才能准确找到那本书。比如，我们想选中所有 type 属性等于 button 的 <input> 标签，就可以用这个选择器；如果有其它 type（比如 submit 或 text），就不会被选中。

下面我们通过一个简单示例，来看一下精确值匹配的具体用法：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接示例</title>
  <style>
    /* 为PDF文件链接添加样式 */
    a[href$=".pdf"] {
      color: #dc3545;
      font-weight

在这个简单的例子中，我们展示了精确值匹配的用法：

a[href$=".pdf"] 选择所有以".pdf"结尾的链接，显示为红色粗体
a[href^="http"] 选择所有以"http"开头的链接，显示为蓝色下划线
a[href^="mailto:"] 选择所有以"mailto:"开头的链接，显示为绿色斜体

精确值匹配让我们可以根据链接的地址特征来应用不同的样式。

部分值匹配

部分值匹配是属性选择器里最灵活的用法。它可以根据属性值里包含的某个内容来选择元素。举个例子，就像你去图书馆找书时，不用管书名是不是完全一样，只要书名里带有“编程”两个字的书都能找到。下面我们用一个简单的文章标签例子来看看部分值匹配的用法：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章标签</title>
  <style>
    /* 为包含"教程"的标题添加样式 */
    h2[title*="教程"] {
      color: #007bff;
      font-weight

在这个简单的例子中，我们展示了部分值匹配的基本用法：

h2[title*="教程"] 选择所有title属性中包含"教程"的标题，显示为蓝色粗体
h2[title*="新闻"] 选择所有title属性中包含"新闻"的标题，显示为绿色斜体
h2[title^="热门"] 选择所有title属性以"热门"开头的标题，添加黄色背景

部分值匹配让我们可以根据属性值的部分内容来选择元素，而不需要完全匹配。

大小写不敏感

在某些情况下，我们希望能够不区分大小写地匹配属性值。CSS 提供了 i 标识符来实现这个功能，这对于处理用户输入或不同来源的数据特别有用。让我们用一个多语言网站的例子来说明大小写不敏感匹配的使用：

|
/* 不区分大小写匹配语言代码 */
[lang|="zh" i] {
  font-family: "微软雅黑", "PingFang SC", sans-serif;
}
 
[lang|="en" i] {
  font-family: "Arial", "Helvetica", sans-serif;
}
 
/* 不区分大小写匹配文件扩展名 */
a[href$=".PDF" i], a

在这个例子中，我们使用 i 标识符来确保选择器能够匹配不同大小写的属性值。这对于处理来自不同来源的数据特别有用，因为有些系统可能使用大写，有些可能使用小写，有些可能使用混合大小写。

大小写不敏感匹配特别适用于处理用户生成的内容、API 数据或来自不同系统的数据，这些数据的大小写格式可能不一致。

文档结构与选择器

要深入掌握 CSS 选择器，首先必须理解 HTML 文档的结构。可以将 HTML 文档想象成一棵“家族树”，每个标签元素在其中都有自己的位置和角色。正是这种结构让 CSS 选择器能够非常灵活、精准地根据元素之间的层级与关系来设置样式。

父子关系的理解

HTML 的结构关系其实和家族成员的关系类似：有父母、子女、祖辈、后代等。每个元素既可能是父节点，也可以是别的元素的子节点、祖先节点或后代节点。准确理解这些层级与联系，是使用组合选择器和结构选择器的基础。下面结构图展示 HTML 元素的层级关系：

在这个文档树中，我们可以看到清晰的层次关系。html 元素是根元素，它包含 head 和 body 两个子元素。body 元素又包含 header、main 和 footer 三个子元素。main 元素包含 section 和 aside 两个子元素，而 section 元素又包含多个 article 元素。

这种层次结构为 CSS 选择器提供了丰富的选择可能性。我们可以选择直接子元素、后代元素、兄弟元素等，每种选择方式都有其特定的用途和优势。

后代选择器

后代选择器使用空格来连接两个或多个选择器，它选择的是第一个选择器元素内部的所有后代元素，不管它们嵌套多深。这就像是在一个大家族中寻找所有姓“张”的人，不管他们在家族中的辈分如何。让我们用一个简单的卡片例子来说明后代选择器的使用：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>卡片示例</title>
  <style>
    /* 卡片内的所有链接 */
    .card a {
      color: #007bff;
      text-decoration: none;

在这个简单的例子中，我们展示了后代选择器的基本用法：

.card a 选择所有在.card容器内的链接，显示为蓝色
.card p 选择所有在.card容器内的段落，显示为灰色
.card h3 选择所有在.card容器内的三级标题

注意外部的元素不受影响，只有.card容器内的后代元素才会应用样式。

后代选择器的强大之处在于它能够选择任意深度的嵌套元素。无论链接嵌套在多少层元素内部，只要它们在指定的祖先元素内，就会被选中。这种灵活性使得后代选择器成为创建一致样式系统的强大工具。

子选择器

子选择器使用大于号（>）来连接两个选择器，它只选择第一个选择器元素的直接子元素，不包括更深层的后代元素。这就像是在家族中只选择直接的孩子，不包括孙子、曾孙等。让我们用一个简单的容器例子来说明子选择器的使用：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>子选择器示例</title>
  <style>
    /* 只选择容器的直接子标题 */
    .container > h3 {
      color: #007bff;
      font-weight: bold

在这个例子中，我们展示了子选择器(>)的基本用法：

.container > h3 只选择容器的直接子标题（蓝色粗体），不选择内部盒子里的标题
.container > p 只选择容器的直接子段落（灰色），不选择内部盒子里的段落
.container > button 只选择容器的直接子按钮（绿色背景），不选择内部盒子里的按钮

注意内部盒子里的元素不受子选择器影响，只有容器的直接子元素才会应用样式。

相邻兄弟选择器

相邻兄弟选择器使用加号（+）来连接两个选择器，它选择紧跟在第一个选择器元素后面的第一个兄弟元素。这就像是在排队时选择紧挨着你的那个人一样。让我们用一个简单的段落例子来说明相邻兄弟选择器的使用：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>相邻兄弟选择器示例</title>
  <style>
    /* h3后面的第一个p使用特殊样式 */
    h3 + p {
      color: #007bff;
      font-weight: bold

在这个简单的例子中，我们展示了相邻兄弟选择器(+)的基本用法：

h3 + p 选择紧跟在h3标题后面的第一个段落，显示为蓝色粗体
button + a 选择紧跟在按钮后面的第一个链接，显示为绿色
div + p 选择紧跟在div后面的第一个段落，添加背景色

相邻兄弟选择器只选择紧挨着的下一个兄弟元素，不会选择其他位置的元素。

通用兄弟选择器

通用兄弟选择器使用波浪号（~）来连接两个选择器，它选择第一个选择器元素后面的所有兄弟元素，不管它们之间是否有其他元素。这就像是在家族中选择所有比你年轻的兄弟姐妹一样。让我们用一个简单的列表例子来说明通用兄弟选择器的使用：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>通用兄弟选择器示例</title>
  <style>
    /* 标题后面的所有段落 */
    h3 ~ p {
      color: #666;
      margin-left: 15

在这个简单的例子中，我们展示了通用兄弟选择器(~)的基本用法：

h3 ~ p 选择h3标题后面的所有段落，显示为灰色并添加左边距
button ~ a 选择按钮后面的所有链接，显示为蓝色
.important ~ * 选择重要提示后面的所有元素，显示为粗体

通用兄弟选择器会选择第一个元素后面所有的兄弟元素，而不仅仅是紧挨着的下一个。

通用兄弟选择器只选择在第一个元素后面的兄弟元素，不会选择前面的元素。元素的顺序必须与 HTML 中的顺序一致。

小结

通过本课程的学习，你已经掌握了 CSS 选择器的基本概念和主要类型，从简单的类型选择器到更复杂的类选择器、ID 选择器、属性选择器以及各种组合器。这些工具能够让你灵活且精确地控制网页元素的样式，实现高效、可维护的页面设计。

理解并熟练应用选择器，是写出规范、高效 CSS 代码的关键。在开发中，合理选择类型选择器、类选择器和ID选择器，有助于根据页面实际需求高效地管理样式。随着经验积累，你会更加得心应手地利用各种选择器，实现不同场景下的样式需求。

实战练习

练习一：类型选择器与分组选择器

假设我们有一个简单的博客页面，包含以下HTML结构：

|
<div class="blog-post">
  <h1>我的旅行日记</h1>
  <p>今天去了杭州西湖...</p>
  <h2>西湖印象</h2>
  <p>湖光山色，美不胜收。</p>
  <h3>最佳观赏时间</h3>
  <p>清晨和傍晚是最好的时候。</p>
</div>

请写出CSS选择器，实现以下样式效果：

为所有标题（h1、h2、h3）设置统一的深绿色文字颜色（#2c5530）
使用楷体字体
设置1em的底部边距

|
h1, h2, h3 {
  color: #2c5530;
  margin-bottom: 1em;
  font-family: "楷体", serif;
}

练习二：类选择器与ID选择器

我们有一个电商网站的商品卡片，HTML结构如下：

|
<div class="product-card featured">
  <h3 class="product-title">精选商品</h3>
  <p class="product-price">$99.00</p>
  <button class="btn btn-primary" id="buy-now">立即购买</button>
</div>
 
<div class="product-card">

为所有商品卡片添加1px灰色实线边框、15px内边距、10px外边距和8px圆角
为精选商品添加淡黄色背景色（#fff3cd）和橙色边框（#ffc107）
为所有按钮添加8px垂直内边距、16px水平内边距、无边框、4px圆角、指针光标和14px字体大小
为ID为"buy-now"的按钮添加悬停时的深蓝色背景色（#0056b3）和白色文字

|
/* 1. 所有商品卡片 */
.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  border-radius: 8px;
}
 
/* 2. 精选商品 */
.product-card.featured {
  background-color: #fff3cd;
  border-color: #ffc107;
}

练习三：属性选择器

我们有一个表单页面，包含各种输入控件：

|
<form>
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <input type="text" name="address">

为所有必填字段（required属性）添加2px红色实线边框（#dc3545）
为邮箱输入框添加浅灰色背景（#f8f9fa）
为已选中的复选框添加绿色阴影效果（#28a745）
为禁用的按钮添加灰色背景（#6c757d）、白色文字和禁用光标

|
/* 1. 必填字段 */
input[required] {
  border: 2px solid #dc3545;
}
 
/* 2. 邮箱输入框 */
input[type="email"] {
  background-color: #f8f9fa;
}
 
/* 3. 已选中复选框 */
input[type="checkbox"][checked] {
  box-shadow: 0 0 5

练习四：后代选择器与子选择器

我们有一个多层嵌套的导航菜单：

|
<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#home">首页</a>
      <ul class="submenu">
        <li><a href="#welcome">欢迎</a></li

为导航菜单内的所有链接添加蓝色文字（#007bff）、无下划线、5px垂直内边距、10px水平内边距和行内块显示
只为主导航链接添加粗体字体和深灰色文字（#495057）
为子菜单链接添加浅灰色文字（#6c757d）、14px字体大小和3px垂直内边距、8px水平内边距

|
/* 1. 导航菜单内的所有链接 */
.main-nav a {
  text-decoration: none;
  color: #007bff;
  padding: 5px 10px;
  display: inline-block;
}
 
/* 2. 主导航链接 */
.nav-list > li > a {
  font-weight: bold;
  color: #495057;

练习五：兄弟选择器

我们有一个文章页面，包含标题、段落和引用：

|
<article>
  <h2>文章标题</h2>
  <p>这是文章的第一段内容。</p>
  <p>这是文章的第二段内容。</p>
  <blockquote>这是文章中的引用内容。</blockquote>
  <p>这是引用后的段落。</p>
  <p>这是文章的最后一段。</p>
 
  <h2>第二章标题</h2>
  <p>第二章的第一段。</

为标题后面的第一个段落添加粗体字体和蓝色文字（#007bff）
为引用后面的所有段落添加2em首行缩进和20px左边距
为所有标题后面的引用添加4px左边框（#ffc107）、15px左内边距和斜体样式

|
/* 1. 标题后的第一个段落 */
h2 + p {
  font-weight: bold;
  color: #007bff;
}
 
/* 2. 引用后的所有段落 */
blockquote ~ p {
  text-indent: 2em;
  margin-left: 20px;
}
 
/* 3. 标题后的引用 */
h2 ~ blockquote {
  border-left: 4