目标元素伪类 - CSS

在 CSS 中，有一些伪类被称为“目标元素伪类”，它们允许您更好地控制页面上正在被“目标化”的元素。当这些元素成为当前URL中的目标时，它们将被设置为活动状态。通常，这些元素与网站或应用程序的导航相关。

以下是几种常见的目标元素伪类：

:active

:active 伪类用于定义被激活的元素。元素被激活指的是用户正在按下鼠标左键或者按下回车键，此时元素以激活状态呈现。

a:active {
    color: red;
}

在上面的示例中，当用户按下鼠标左键时，<a> 元素的文本颜色将变为红色。

:focus

:focus 伪类用于定义当前被选中的元素，例如表单元素在获取焦点时。

input:focus {
    outline: none;
    box-shadow: 0 0 3px blue;
}

在上面的示例中，当用户点击 <input> 元素时，它将没有外部轮廓，并且将被放置在蓝色阴影之下。

:hover

:hover 伪类用于定义当鼠标悬停在元素上时要应用的样式。

a:hover {
    text-decoration: underline;
}

在上面的示例中，当鼠标悬停在 <a> 元素上时，它的文本将带有下划线。

:target

:target 伪类用于定义当前是否目标元素，通常用于页面内的锚点链接。

#section1:target {
    background-color: yellow;
}

在上面的示例中，当用户单击带有 #section1 的锚链接时，与该链接相对应的元素将有黄色背景。

总结

通过目标元素伪类，您可以更好地控制页面上正在被“目标化”的元素。使用它们，您可以轻松更改激活、选中、悬停和目标元素的样式。