从0开始学前端 第十课：CSS中的伪类与伪元素

第十课：CSS中的伪类与伪元素

学习目标

在本课中，我们将深入了解伪类与伪元素的概念和用法，包括：

• 理解伪类和伪元素的区别。
• 学习常用伪类，如 :hover、:focus、:nth-child等的用法。
• 掌握伪元素的使用，特别是 ::before 和 ::after。
• 应用伪类和伪元素来增强页面样式。

学习内容

1. 伪类与伪元素的区别

概念：

• 伪类（Pseudo-classes）是用来定义元素的特殊状态的，如鼠标悬停、获得焦点等。
• 伪元素（Pseudo-elements）则用来创建一些不在文档树中的元素，并为其添加样式，例如在元素内容前后添加新内容。

代码示例：无，此部分为理论知识。

2. 常用伪类

概念：
伪类用于定义元素的特殊状态。

代码示例：

/* 鼠标悬停伪类 */
a:hover {
  color: blue;
}

/* 焦点伪类 */
input:focus {
  border-color: green;
}

/* 子元素伪类 */
li:nth-child(odd) {
  background-color: gray;
}

预计输出效果：

• a:hover 将使鼠标悬停在链接上时，文本颜色变为蓝色。
• input:focus 将使输入框获得焦点时，边框颜色变为绿色。
• li:nth-child(odd) 将使列表中的奇数项背景颜色变为灰色。

3. 常用伪元素

概念：
伪元素用于向元素添加装饰性内容。

代码示例：

/* before伪元素 */
p::before {
  content: "注意：";
  color: red;
}

/* after伪元素 */
p::after {
  content: "（完）";
  color: green;
}

预计输出效果：

• p::before 将在所有<p>元素的内容前添加红色的“注意：”文本。
• p::after 将在所有<p>元素的内容后添加绿色的“（完）”文本。

课后练习

1. 为网页中的所有超链接添加一个伪类，使得它们在被访问后变成紫色。
2. 使用伪元素给文章的每个段落开头添加一个蓝色的大写字母。
3. 创建一个列表项，在鼠标悬停时，背景变为黄色，并且在每个列表项的前面使用伪元素添加一个黑色的圆点。

解析

1. 超链接访问后的颜色变化：

   a:visited {
     color: purple;
   }
   

   所有被访问过的<a>元素文本颜色将变为紫色。

2. 段落开头的大写字母：

   p::first-letter {
     color: blue;
     font-size: 2em;
     font-weight: bold;
   }
   

   每个<p>元素的第一个字母将变为蓝色，字体大小为2em，并加粗。

3. 列表项的鼠标悬停效果与圆点：

   li:hover {
     background-color: yellow;
   }
   li::before {
     content: "• ";
     color: black;
   }
   

   • 鼠标悬停时，每个<li>元素的背景变为黄色。
   • 每个<li>元素的内容前将出现一个黑色的圆点（“•”）。

---

章节目录
第十一课：CSS的应用 - 在HTML中应用CSS的三种方式