CSS伪类——动态伪类解析（link/visited/hover/active/focus）

CSS 伪类的分类

在 CSS 中，伪类可以分为两大类：

1. 静态伪类 ：用于为特定类型的 HTML 元素指定样式，如：<p>、<h1>、<ul> 等。
2. 动态伪类 ：用于为元素在特定状态下的样式指定样式，如：鼠标悬停、点击、获得焦点等。

动态伪类的应用

1. link 伪类

link 伪类用于为链接（<a> 元素）指定样式。它可以用来设置链接的字体、颜色、下划线等样式。

a:link {
  color: blue;
  text-decoration: none;
}

上面的代码将所有链接设置为蓝色，并且去除下划线。

2. visited 伪类

visited 伪类用于为已被访问过的链接（<a> 元素）指定样式。它可以用来设置已访问链接的字体、颜色、下划线等样式。

a:visited {
  color: purple;
  text-decoration: none;
}

上面的代码将所有已被访问过的链接设置为紫色，并且去除下划线。

3. hover 伪类

hover 伪类用于为鼠标悬停在元素上的样式指定样式。它可以用来设置鼠标悬停时的字体、颜色、背景色等样式。

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

上面的代码将鼠标悬停在所有链接上时，将链接设置为红色，并添加下划线。

4. active 伪类

active 伪类用于为被激活的元素指定样式。对于链接（<a> 元素）来说，当点击链接时，该链接就会被激活。它可以用来设置被激活时的字体、颜色、背景色等样式。

a:active {
  color: green;
  background-color: yellow;
}

上面的代码将所有被激活的链接设置为绿色，并添加黄色的背景色。

5. focus 伪类

focus 伪类用于为获得焦点的元素指定样式。对于某些元素（如 <input>、<textarea>、<button> 等），当它们获得焦点时，就会应用 focus 伪类的样式。它可以用来设置获得焦点时的字体、颜色、背景色等样式。

input:focus {
  border: 1px solid blue;
  background-color: lightblue;
}

上面的代码将所有获得焦点的 <input> 元素的边框设置为蓝色，并添加淡蓝色的背景色。

注意：

1. 对于 div 是没有 focus 行为的，因为一个 div 没法用鼠标获得焦点，但是可以通过设置 div 的 tabIndex 来实现。
2. 可以通过 not 伪类来否定一个伪类，例如：

a:not(:visited) {
  color: red;
}

上面的代码将所有未被访问过的链接设置为红色。

总结

动态伪类提供了灵活的样式控制，可以为元素在不同状态下的样式指定不同的样式。它们广泛应用于网页设计中，可以帮助我们创建更美观、更交互的网页。