CSS 伪类

CSS 伪类是在选择器中使用的关键字，用于选取那些未被直接命名的 HTML 元素。它们被用来向某些选择器添加特殊的效果，比如说链接的不同状态。

1. :hover

:hover 伪类会在鼠标悬停在元素上时触发，通常用于改变元素的样式。

.button:hover {
    background-color: #007bff;
    color: #fff;
}

2. :active

:active 伪类会在元素被激活时触发，比如鼠标按下时。常用于按钮的样式。

.button:active {
    background-color: #6c757d;
    color: #fff;
}

3. :focus

:focus 伪类表示元素获得焦点时触发，比如当用户点击一个表单元素时。

.textbox:focus {
    border-color: #007bff;
}

4. :first-child

:first-child 伪类表示元素是它的父元素的第一个子元素。

.container div:first-child {
    margin-top: 0;
}

5. :last-child

:last-child 伪类表示元素是它的父元素的最后一个子元素。

.container div:last-child {
    margin-bottom: 0;
}

6. :nth-child()

:nth-child() 伪类可以选中一个元素的特定子元素，可以使用 odd 和 even 来选中奇数或偶数。

.container div:nth-child(odd) {
    background-color: #f2f2f2;
}

7. :not()

:not() 伪类可以用来排除某些元素，实现类似于取反的效果。

.container div:not(.selected) {
    opacity: 0.5;
}

8. :checked

:checked 伪类表示被勾选的表单元素，例如复选框和单选框。

input:checked + label {
    font-weight: bold;
}

9. :disabled

:disabled 伪类表示被禁用的表单元素。

input:disabled {
    background-color: #f2f2f2;
}

10. :empty

:empty 伪类表示没有子元素的元素。

.container div:empty {
    height: 20px;
    background-color: #f2f2f2;
}

以上是一些常用的 CSS 伪类，它们可以极大地扩展你的 CSS 选择器，让你在页面制作中更加灵活和方便。