CSS 伪类

CSS 伪类（pseudo-classes）是用来选择元素的特殊状态的选择器，这些状态不能用普通的类或 ID 选择器来表示。伪类以冒号（:）开头，用于向某些选择器添加特殊的效果。

以下是一些常见的 CSS 伪类及其用法：

1、:hover：选择鼠标悬停在元素上时的状态。

a:hover {
    color: red;
}

2、:focus：选择获取焦点的元素，通常用于表单元素。

input:focus {
    border-color: blue;
}

3、:active：选择正在被激活的元素，通常在用户点击元素但还未释放鼠标按钮时。

button:active {
    background-color: yellow;
}

4、:visited：选择已被访问的链接。

a:visited {
    color: purple;
}

5、:first-child：选择父元素的第一个子元素。

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

6、:last-child：选择父元素的最后一个子元素。

li:last-child {
    margin-right: 0;
}

7、:nth-child(n)：选择父元素的第 n 个子元素，可以使用公式来选择更复杂的模式。

tr:nth-child(2n) {
    background-color: #f0f0f0;
}

8、:nth-of-type(n)：选择父元素下同类型的第 n 个子元素。

p:nth-of-type(odd) {
    color: blue;
}

9、:not(selector)：选择不符合指定选择器的元素。

input:not(:checked) {
    opacity: 0.5;
}

10、:checked：选择被选中的表单元素，比如复选框或单选按钮。

input[type="checkbox"]:checked {
    border-color: green;
}

这些是一些常用的 CSS 伪类，它们使得在不添加额外标记的情况下，可以选择和样式化文档中的各种状态和元素。