四种css 伪类选择器

下面是详细讲解“四种CSS伪类选择器”的完整攻略，该过程中包含两条示例说明。

CSS伪类选择器是用于选择HTML元素的特殊选择器，根据元素在不同状态下的表现来选择元素，如链接状态、 hover 状态、focus状态、 nth-child 选择。在CSS中有四种常用的伪类选择器，分别是:link、:visited、:hover和:focus。

:link 和 :visited 伪类选择器

一般情况下，链接是文本在未被点击时的视觉状态，我们可以使用 :link 伪类来选择这种状态，:link 可以表示它还没有被访问过。

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

上述代码是设置未访问过的链接文本颜色为蓝色，且添加下划线。如果该链接被访问过，则被设置为 :visited 状态。

a:visited {
  color: #993399;
  text-decoration: underline;
}

上述代码是设置访问过的链接文本颜色为紫色，且添加下划线。

:hover 和 :focus 伪类选择器

:hover 伪类可以定义HTML元素在鼠标滑过时的样式，可以用于增加互动性。

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

上述代码是设置在鼠标悬停在链接上时文本颜色为红色，且添加下划线。

:focus 伪类可用于定义元素在被聚焦时的样式。可以使用 tab 键在焦点之间切换，如果用户触摸了具有 :focus 样式的元素，触摸会触发该样式。

input:focus {
  background-color: #F5F5F5;
}

上述代码是设置 input 元素在被聚焦时背景颜色为浅灰色。

通过使用这四种伪类选择器，可以为HTML元素定义一些在不同状态下的视觉效果，增加用户交互性和体验。