浅谈CSS 伪元素&伪类的妙用

当我们使用CSS来渲染HTML页面时，可以利用CSS 伪元素&伪类为HTML元素添加特殊样式，以及实现一些常规CSS无法实现的效果。

CSS 伪类

CSS伪类是用来为HTML元素添加动态效果和改变CSS元素状态，常用的CSS伪类包括：

• :hover 鼠标悬停时的状态
• :active 当前活动状态，如鼠标按下时
• :focus 焦点状态，如表单元素聚焦时
• :visited 被访问过的状态，用于超链接等元素
• :first-child 第一个子元素
• :last-child 最后一个子元素

下面是一个CSS伪类的样例，我们会在鼠标悬停时改变链接文本颜色。

a:hover {
  color: red;
}

CSS 伪元素

CSS伪元素是用来为HTML元素添加上不同于文档tree结构的额外内容，包括：

• ::before 在元素之前添加额外的内容
• ::after 在元素之后添加额外的内容

下面是一个CSS伪元素的样例，通过::before伪元素添加显示图片的效果。

div::before {
  content: url("example.png");
}

同时可以结合CSS样式达到更复杂的效果，比如：利用伪元素和position属性来定位一个元素。

div::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
}

示例说明

示例一

我们可以利用伪类为表格的单元格添加样式。比如，当鼠标悬停在表格单元格上时，变成深蓝色背景。

td:hover {
  background-color: #0073e6;
}

示例二

同样利用伪类，在表单元素上添加验证提示内容，让用户更容易理解错误。

<input type="text" required>

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

input:focus + span::before {
  content: "⚠️ ";
  color: red;
}

总结

通过使用CSS伪元素&伪类，我们可以轻松实现更丰富多样的效果，同时也可以提高网站的用户体验。了解并掌握CSS伪元素&伪类的应用，能够使你的前端开发技能更加全面。