CSS伪类选择器

概述

CSS 伪类用于向选择器添加样式，但仅当这些选择器满足特定条件时。伪类是通过在 CSS 中的选择器后添加一个冒号 (:) 来表示的，然后是一个伪类，例如“hover”、“focus”或“active”，如下所示：

  一：悬停{
    /* 这里是你的风格 */
  }

伪类的想法是，当用户将鼠标悬停在元素上(:hover)或使用键盘(:focus)或在用户选择链接时(:active)时，您可以对元素进行不同的样式化。您还可以在用户访问链接后对链接进行不同的样式化 (:visited)。还有许多其他可用的伪类。

使用 CSS 伪类突出显示用户的位置

当用户用鼠标指向网页上的对象时，如果该对象以某种方式响应，这将很有帮助。例如，当用户将鼠标悬停在链接上时，该链接的颜色和背景颜色可能会反转。在下面的 CSS 示例中，页面上的所有链接都被风格化为白色背景上的黑色，但当用户将鼠标悬停在颜色上时，颜色会反转。

  一个 {
    颜色：黑色;
    背景颜色：白色；
  }
  一：悬停{
    白颜色;
    背景颜色：黑色；
  }

此功能使页面栩栩如生，当用户在页面上移动鼠标时做出响应。对于使用键盘导航的人(例如，通过按 Tab 键在页面上的链接之间移动)，此功能更为关键，因为键盘用户通常很难跟踪他们在页面上的位置。大多数网络浏览器都提供了一些视觉指示当前哪个元素具有焦点，但在一些领先的浏览器中，这只是一条细虚线，即使不是不可能，也很难看到，尤其是在某些背景下。要为键盘和鼠标用户添加相同的功能，我们只需将 :focus 伪类添加到我们之前的定义中，如下所示：

  一个 {
    颜色：黑色;
    背景颜色：白色；
  }
  一个：悬停，一个：焦点{
    白颜色;
    背景颜色：黑色；
  }

现在，每次用户导航到集合上的链接时，无论他们是通过鼠标指向还是通过键盘导航，该链接都会反转颜色。