当前位置：首页 > article >正文

CSS 伪类和伪元素：为你的选择器注入更多活力

article 2025/1/9 5:13:50

在 CSS 中，选择器是我们定位 HTML 元素的基础。但有时，我们可能需要根据元素的状态或在元素内部的特定位置来选择元素。这时，CSS 伪类和伪元素就派上用场了。它们允许我们在不修改 HTML 结构的情况下，为选择器注入更多的活力，实现更灵活的样式控制。

什么是 CSS 伪类？

CSS 伪类用于选择处于特定状态的元素。它们以一个冒号 : 开头，后面跟着伪类名称，例如 :hover、:active、:focus 等。

常见的伪类：

:hover: 当鼠标悬停在元素上时选中该元素。
:active: 当元素被激活时（通常是鼠标点击或键盘按下）选中该元素。
:focus: 当元素获得焦点时（通常是用户点击或使用 Tab 键）选中该元素。
:visited: 当链接被访问过时选中该链接。
:link: 当链接未被访问过时选中该链接。
:first-child: 选中父元素的第一个子元素。
:last-child: 选中父元素的最后一个子元素。
:nth-child(n): 选中父元素的第 n 个子元素。
:nth-of-type(n): 选中父元素的第 n 个指定类型的子元素。
:not(selector): 选中不匹配指定选择器的元素。
:enabled: 选中启用的表单元素。
:disabled: 选中禁用的表单元素。
:checked: 选中选中的复选框或单选按钮。
:valid: 选中验证通过的表单元素。
:invalid: 选中验证失败的表单元素。

示例：

<a href="#">这是一个链接</a>
<button>这是一个按钮</button>
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

a:hover {
  color: red;
}

button:active {
  background-color: lightblue;
}

li:first-child {
  font-weight: bold;
}

li:nth-child(2) {
  color: green;
}

input:focus {
  border-color: blue;
}

在这个例子中：

当鼠标悬停在链接上时，链接的颜色会变为红色。
当按钮被点击时，按钮的背景颜色会变为浅蓝色。
列表的第一个列表项的字体会变为粗体。
列表的第二个列表项的颜色会变为绿色。
当输入框获得焦点时，输入框的边框颜色会变为蓝色。

什么是 CSS 伪元素？

CSS 伪元素用于选择元素的特定部分，而不是整个元素。它们以两个冒号 :: 开头，后面跟着伪元素名称，例如 ::before、::after、::first-line 等。

常见的伪元素：

::before: 在元素的内容之前插入内容。
::after: 在元素的内容之后插入内容。
::first-line: 选中元素的第一行文本。
::first-letter: 选中元素的第一个字母。
::selection: 选中用户选中的文本。
::placeholder: 选中表单元素的占位符文本。

示例：

<p>这是一个段落。</p>
<div class="box"></div>

p::first-line {
  font-size: 1.2em;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

.box::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: orange;
  margin-right: 10px;
}

::selection {
  background-color: yellow;
}

在这个例子中：

段落的第一行文本的字体大小会变为 1.2 倍。
段落的第一个字母的字体大小会变为 2 倍，颜色会变为红色。
在 .box 元素的内容之前会插入一个橙色的方块。
用户选中的文本的背景颜色会变为黄色。

伪类和伪元素的区别

伪类选择的是 元素的状态，例如鼠标悬停、获得焦点等。
伪元素 选择的是 元素的特定部分，例如第一行文本、内容之前或之后等。
伪类使用 一个冒号 : 开头，伪元素使用 两个冒号 :: 开头（在 CSS2 中，伪元素使用一个冒号，但为了区分伪类和伪元素，CSS3 引入了两个冒号）。