3.3 伪类与伪元素
3.3 伪类与伪元素
1. 什么是伪类和伪元素？
- 伪类（Pseudo-classes） 是用于定义元素的特殊状态的 CSS 选择器，它们允许你选择某些条件下的元素，如鼠标悬停、元素获取焦点等。
- 伪元素（Pseudo-elements） 则用于选择元素的特定部分或者插入内容，如选择元素的第一行文本或在元素之前插入内容。
2. 常见的伪类
2.1 :hover
:hover 是最常用的伪类之一，它用于选中鼠标悬停在某个元素上的状态。当鼠标指针悬停在元素上时，应用此伪类的样式。
a:hover {
color: red;
}
在这个例子中，当鼠标悬停在链接上时，链接的颜色将变为红色。
2.2 :active
:active 伪类用于选中正在被点击的元素。它通常与 :hover 一起使用，但它的作用是当元素处于“活动”状态时应用样式。
button:active {
background-color: #3498db;
}
在此示例中，当按钮被按下时，背景颜色将变为蓝色。
2.3 :focus
:focus 伪类用于选中获取焦点的元素，通常用于表单元素（如 input、textarea 等）。当元素被激活并获得焦点时，应用此伪类的样式。
input:focus {
border-color: blue;
outline: none;
}
此代码在输入框获得焦点时，边框颜色将变为蓝色。
2.4 :first-child 和 :last-child
:first-child 和 :last-child 用于选择某个父元素下的第一个或最后一个子元素。
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
color: green;
}
在这段代码中，第一个 li 元素的文本将加粗，最后一个 li 元素的文本颜色将变为绿色。
2.5 :nth-child()
:nth-child() 伪类用于选中父元素的第 n 个子元素，n 可以是数字、关键字（如 odd、even）或者表达式。
ul li:nth-child(2) {
color: red;
}
ul li:nth-child(odd) {
background-color: #f2f2f2;
}
第一个规则将选中 ul 中的第二个 li 元素并将其文本颜色设置为红色。第二个规则会选中所有奇数位置的 li 元素，并设置背景色。
2.6 :not()
:not() 伪类用于选中不符合某个条件的元素。它接受一个选择器作为参数，并排除匹配该选择器的元素。
p:not(.highlight) {
color: gray;
}
在这个例子中，所有没有 .highlight 类的 p 元素的文本颜色将变为灰色。
3. 常见的伪元素
3.1 ::before
::before 伪元素用于在选中元素的内容之前插入内容。它常用于装饰元素或者添加符号。
button::before {
content: "👉";
margin-right: 8px;
}
在这段代码中，所有按钮元素的文本内容前会插入一个箭头符号。
3.2 ::after
::after 伪元素与 ::before 类似，但它会在选中元素的内容之后插入内容。::after 经常用来清除浮动，或者在元素后插入装饰性内容。
button::after {
content: " ✔";
}
这里，所有按钮元素的文本内容后都会添加一个勾号符号。
3.3 ::first-letter
::first-letter 伪元素用于选中元素内容的第一个字母，并且可以应用特定的样式。常见于首字母大写的设计。
p::first-letter {
font-size: 2em;
font-weight: bold;
}
此代码会使段落中每个元素的首字母变大并加粗。
3.4 ::first-line
::first-line 伪元素用于选中元素内容的第一行文本，并应用样式。它通常用于标题或者文本开头的特殊样式。
p::first-line {
font-style: italic;
color: blue;
}
这段代码会使段落的第一行文本变为斜体并改变颜色。
4. 伪类与伪元素的区别
- 伪类（Pseudo-classes） 是用于选择元素的某种状态或条件，例如悬停、获取焦点等。
- 伪元素（Pseudo-elements） 是用于选择元素的一部分或在元素前后插入内容，例如首字母、内容的前后部分等。
需要注意的是，伪元素的选择器使用双冒号（::）而伪类使用单冒号（:），尽管在 CSS2 中，伪类和伪元素的语法是一样的，现代 CSS 推荐使用双冒号来定义伪元素，单冒号仍然可以被浏览器识别。
5. 示例：使用伪类和伪元素
示例 1：按钮的悬停和焦点效果
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:focus {
outline: 2px solid #2c3e50;
}
此示例中，按钮在悬停时背景颜色会改变，在获得焦点时会出现一个蓝色的轮廓。
示例 2：清除浮动并添加装饰内容
.container::after {
content: "";
display: block;
clear: both;
}
.container div::before {
content: "✔ ";
color: green;
}
在这个例子中，::after 伪元素用于清除浮动，确保 .container 元素的高度包含浮动的子元素。而 ::before 在每个子 div 元素前插入一个绿色勾号。
6. 结论
伪类和伪元素为开发者提供了强大的工具来选择元素的特殊状态或部分，并应用样式。这些技术使得网页设计更具灵活性和可控制性，并且能够减少对额外 HTML 标签的依赖，提高代码的简洁性和可维护性。