CSS 伪类和伪元素知识点汇总，不可错过，让你不再困惑

一、链接相关伪类

1. a:link
   • 作用：选择未被访问过的链接。
   • 通常用于设置未访问链接的特定样式，如颜色、下划线等。例如：a:link { color: blue; text-decoration: none; } 将未访问链接的颜色设置为蓝色且无下划线。
2. a:visited
   • 作用：选择已经被访问过的链接。
   • 可以用来区分已访问和未访问的链接，设置不同的样式。例如：a:visited { color: purple; } 将已访问链接的颜色设置为紫色。
3. a:active
   • 作用：当链接被激活（点击但未释放鼠标按钮）时应用的样式。
   • 用于提供链接被点击时的即时反馈。例如：a:active { color: green; } 链接被激活时变为绿色。

二、通用伪类和伪元素

1. :hover
   • 作用：当鼠标悬停在任何元素上时应用的样式，并非仅限于 <a> 元素。
   • 应用场景广泛，可以为各种元素增加交互效果。例如，当鼠标悬停在一个 <div> 元素上时，可以改变其背景颜色或添加阴影。如：div:hover { background-color: #f0f0f0; box-shadow: 2px 2px 5px gray; }
2. ::before 和 ::after
   • 作用：在任何元素的内容之前（::before）或之后（::after）插入生成的内容，也不局限于 <a> 元素。
   • 可以用于添加装饰性元素、图标或提供额外的信息。例如，为一个段落添加引号装饰，p::before { content: "“"; } 和 p::after { content: "”"; }，每个段落前后会出现引号。