CSS 精粹探微：伪类与伪元素的微妙世界

2024-01-17 18:53:32

CSS 的世界中，伪类与伪元素是两个不容忽视的元素，它们宛如点睛之笔，让 web 页面焕发无限可能。伪类能响应鼠标悬停、鼠标单击等用户交互动作，为元素增添交互性。而伪元素则突破了 HTML 结构的限制，让开发者创造出更加精致复杂的元素，实现更丰富的视觉效果。

揭秘伪类的魔力

伪类可以为特定状态下的元素指定样式。最常见的伪类有：

:hover ：当鼠标悬停在元素上时触发。
:active ：当鼠标单击元素时触发。
:focus ：当元素获得焦点时触发。
:first-child ：针对父元素中的第一个子元素。
:last-child ：针对父元素中的最后一个子元素。

伪元素的巧妙运用

伪元素则更具创造性，它允许开发者在 HTML 元素中插入虚拟元素。最常用的伪元素有：

::before ：在元素之前插入虚拟元素。
::after ：在元素之后插入虚拟元素。

伪元素常被用于创建三角形、圆圈等复杂形状，或实现诸如文本渐变等特殊效果。

实战演练

为了深入理解伪类和伪元素的应用，让我们通过一个实例来感受它们的威力：

button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
  cursor: pointer;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00398c;
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}

button:hover::before {
  opacity: 0.6;
}