伪类和伪元素

伪类：

1. 基于特定状态
2. 基于元素位置

link

大多数情况下，浏览器会提供默认样式：

a:link {
  color: blue; /* 未访问的链接通常显示为蓝色 */
}

a:visited {
  color: purple; /* 访问过的链接通常显示为紫色 */
}

也可以进行覆盖：

a:link {
  color: blue; /* 未访问的链接颜色 */
}

a:visited {
  color: purple; /* 访问过的链接颜色 */
}

a:hover {
  color: red; /* 鼠标悬停时的链接颜色 */
}

a:active {
  color: yellow; /* 鼠标点击时的链接颜色 */
}

由于隐私原因，浏览器限制了对:visited 伪类的样式更改，只能更改有限的属性，比如颜色，而不能更改布局相关的属性。如果允许开发者对访问过的链接进行任意样式的更改，那么恶意网站可以通过检测这些样式变化来判断用户是否访问过某些特定的网站，从而侵犯用户隐私。

菜单

鼠标悬停到菜单或者鼠标最后一次点击为菜单，背景颜色改变 hover focus

伪元素：

1. 不重要的样式
2. CSS控制：伪元素完全由CSS控制，这意味着你可以利用CSS的伪类和伪元素选择器来改变它们的样式，而不需要JavaScript的干预
3. 可维护性：当装饰性内容需要变更时，只需修改CSS代码，而不需要触及HTML结构，这有助于提高代码的可维护性。
4. 无障碍性：对于屏幕阅读器等辅助技术，伪元素中的内容通常是不可访问的，这有助于确保这些技术只关注重要的内容，而不是装饰性的细节。

伪类和伪元素结合代替JS dom操作

.box {
  position: relative;
  padding: 10px;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.box::before {
  content: '前置内容';
  position: absolute;
  left: 0;
  top: 0;
  color: #999;
  transition: color 0.3s ease;
}

.box:hover {
  background-color: #e0e0e0;
}

.box:hover::before {
  color: #333;
}