CSS 伪类

CSS伪类（Pseudo-classes）是一种在CSS选择器中添加特殊效果的方式，它们用于选择元素的特定状态或特征。伪类以冒号（:）开头，并且通常与选择器一起使用来应用特定的样式。在本文中，我们将探讨一些常用的CSS伪类，并了解如何使用它们来增强网页的交互性和视觉效果。

1. :hover 伪类

:hover伪类用于选择用户鼠标悬停在上面的元素。它是交互设计中非常常用的一个伪类，可以用来改变链接、按钮或其他元素的外观，以提供视觉反馈。

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

在这个例子中，当用户将鼠标悬停在链接上时，链接的文本颜色会变成红色，并且会有下划线。

2. :focus 伪类

:focus伪类用于选择用户正在通过键盘（如Tab键）导航或已聚焦的元素，如输入框、按钮或链接。

input:focus {
    outline: 2px solid blue;
}

当用户点击或聚焦到输入框时，输入框周围会出现一个蓝色的轮廓。

3. :active 伪类

:active伪类用于选择用户正在点击的元素。它通常与:hover和:focus一起使用，以提供额外的视觉反馈。

button:active {
    background-color: green;
    color: white;
}

当用户点击按钮时，按钮的背景颜色会变成绿色，文本颜色会变成白色。

4. :visited 和 :link 伪类

:visited伪类用于选择用户已经访问过的链接，而:link伪类用于选择尚未访问过的链接。

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

未访问的链接会显示为蓝色，而已访问的链接会显示为紫色。

5. :first-child 和 :last-child 伪类

:first-child伪类用于选择属于其父元素的第一个子元素的每个元素，而:last-child伪类用于选择属于其父元素的最后一个子元素的每个元素。

p:first-child {
    font-weight: bold;
}

p:last-child {
    font-style: italic;
}

段落中的第一个子元素会以粗体显示，而最后一个子元素会以斜体显示。

6. :nth-child() 伪类

:nth-child()伪类用于选择属于其父元素的特定顺序的子元素。你可以使用数字、关键词（如odd和even）或公式来指定顺序。

li:nth-child(2) {
    color: orange;
}

li:nth-child(odd) {
    background-color: lightgray;
}

li:nth-child(3n) {
    font-size: 1.5em;
}

第二个列表项会以橙色显示，所有奇数列表项会有灰色背景，而每三个列表项中的第一个会以较大的字体显示。

7. :not() 伪类

:not()伪类用于选择不匹配给定选择器的元素。它允许你排除特定的元素，以便对剩余的元素应用样式。

p:not(.special) {
    color: gray;
}

所有没有special类的段落都会以灰色显示。

8. :checked 伪类

:checked伪类用于选择处于选中状态的<input>元素（如单选按钮和复选框）。

input[type="checkbox"]:checked + label {
    text-decoration: underline;
}

当复选框被选中时，其相邻的标签会有下划线。

总结

CSS伪类提供了一种强大的方式来选择元素的特定状态或特征，并应用相应的样式。通过合理使用伪类，你可以增强网页的交互性和视觉效果，使用户体验更加出色。

本文地址：https://www.tides.cn/p_css-pseudo-class