Web前端之CSS伪类与伪元素的应用妙招

2024-01-27 14:05:42

CSS 伪类和伪元素概述

CSS 伪类和伪元素是用于在不改变 HTML 结构的情况下修改元素外观的强大工具。伪类用于修改元素在特定状态下的样式，如：鼠标悬停时、元素被激活时、元素获得焦点时等。伪元素用于在元素周围添加额外的内容，如：在元素之前或之后添加文本或图像。

CSS伪类的应用

:hover

当鼠标悬停在元素上时应用样式，是一种非常常见的伪类。例如：

a:hover {
  color: red;
  text-decoration: underline;
}

鼠标悬停在链接上时，链接文本会变成红色并添加下划线。

:active

当元素被激活时应用样式，通常用于按钮元素。例如：

button:active {
  background-color: green;
  color: white;
}

按钮被按下时，按钮背景色变成绿色，文本颜色变成白色。

:focus

当元素获得焦点时应用样式，通常用于输入元素。例如：

input:focus {
  border-color: blue;
}

当输入框获得焦点时，输入框边框颜色变成蓝色。

:visited

当元素已被访问过时应用样式，通常用于链接元素。例如：

a:visited {
  color: purple;
}

当链接已被访问过，链接文本变成紫色。

:link

当元素尚未被访问过时应用样式，通常用于链接元素。例如：

a:link {
  color: blue;
}

当链接尚未被访问过，链接文本变成蓝色。

CSS伪元素的应用

::before

在元素之前插入内容，常用于添加图标或其他装饰元素。例如：

p::before {
  content: "☆ ";
}

在每个段落之前插入一个星号。

::after

在元素之后插入内容，常用于添加箭头或其他装饰元素。例如：

li::after {
  content: "→";
}

在每个列表项之后插入一个箭头。

CSS伪类和伪元素的实际案例

下拉菜单

使用伪类和伪元素可以轻松创建下拉菜单。例如：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

工具提示

使用伪元素可以轻松创建工具提示。例如：

.tooltip {
  position: relative;
}

.tooltip::after {
  content: "This is a tooltip";
  position: absolute;
  display: none;
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tooltip:hover::after {
  display: block;
}