CSS 状态

当用户与页面上的对象进行交互时，他们将使用鼠标或通过触摸来悬停、单击和关注项目。CSS 允许我们使用这些交互来改变样式，给用户反馈他们能做什么和不能做什么。

例如，如果用户将鼠标悬停在链接上，他们就会知道这是一个链接。但是，如果他们将鼠标悬停在段落上，则不会发生任何事情，因为他们无法与之交互。这些最常与锚点一起使用，即指向其他页面的链接，但它们也经常与输入一起使用。

即使它们最常与这两组项目一起使用，它们也可以在大多数情况下用于任何 HTML 元素。主要状态指标有：

• :hover– 当用户将鼠标悬停在元素上时
• :active– 当用户点击一个项目时，在取消点击之前。
• :focus– 当用户专注于某事时，即输入输入。
• :target– 当项目的 ID 与 URL 中的片段匹配时（URL 片段是 # 后跟 URL 末尾的文本。）
• :link– 尚未访问的链接。
• :visited– 已经访问过的链接。默认显示为紫色。

使用这些状态指示器，我们几乎可以在 CSS 中对用户交互做任何我们想做的事情。如果您对其他州感兴趣，我们在此处提供了所有可用 CSS 选择器的完整列表。

最佳实践#

由于 CSS 将最后的元素优先于之前的元素，因此在主要元素之后有状态通常是最佳实践。即想象一个anchor有悬停状态的。我们会这样写：

a {
    color: black;
}
a:hover {
    color: red;
}

当用户将鼠标悬停在上面时，锚点将变为红色。

Active激活#

如前所述，:active将在单击后，但在用户取消单击之前设置样式。一个例子如下所示。这可以应用于 div 以及任何其他元素：

div {
    color: white;
}
div:active {
    color: orange;
}

尝试点击我

重点#

聚焦通常与输入一起使用，但可以与任何其他“可选项卡”元素一起使用，即tabindex在 HTML 中具有 a 的元素。下面显示了一个带有输入的示例：

input {
    background: #101011;
    border: 2px solid #2b2e2f;
    border-radius: 10px;
    padding: 0.5rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
    max-width: 400px;
}
input:focus {
    border: 2px solid white;
    background: white;
    outline: none;
    color: black;
}

大纲

请注意，当您单击输入或“可选项卡”元素时，在大多数浏览器中，您会在元素周围看到一个发光的蓝色边框。这与边界不同，实际上它被称为outline. 如果要删除您单击或关注的输入周围的蓝色轮廓，可以使用以下代码：

input:focus {
    outline: none;
}