CSS伪类
伪类
伪类（单冒号:）：选择元素的特定状态（如:hover）或结构（如:nth-child()）。
用户交互状态
:hover：鼠标悬停。
:active：元素被激活（如点击瞬间）。
:focus：元素获得焦点（如输入框选中）。
:focus-within：子元素获得焦点时父元素生效。
链接与表单
:link：未访问的链接。
:visited：已访问的链接（隐私限制样式）。
:checked：选中复选框/单选框。
:valid/:invalid：表单验证通过/未通过。
结构伪类
:first-child/:last-child：首尾子元素。
:nth-child(n)：第n个子元素（公式如2n+1或关键词odd/even）。
:nth-of-type(n)：同类型的第n个元素。
:not(selector)：排除匹配选择器的元素。
其他状态
:target：URL片段匹配的元素（如#section）。
:empty：无子元素的元素（包括文本节点）。
:root：文档根元素（常用于CSS变量）。
上面是一些常见的伪类示例，还有更多 其他的伪类可用于选择元素的不同状态和位置。
以下是一个使用伪类的示例，展示如何将样式应用到HTML页面：
<!DOCTYPE html>
<html>
<head><title>CSS伪类示例</title><style>/* 选择未访问的链接并设置文字颜色为红色 */a:link {color: red;}/* 选择鼠标悬停在链接上的状态并设置背景颜色为黄色 */a:hover {background-color: yellow;}/* 选择获得焦点的文本输入框并设置边框颜色为蓝色 */input:focus {border-color: blue;}/* 选择父元素下的第一个子元素并设置文字颜色为绿色 */div:first-child {color: green;}/* 选择父元素下的奇数位置的子元素并设置背景颜色为灰色 */ul li:nth-child(odd) {background-color: gray;}</style>
</head>
<body><a href="https://www.example.com">Link 1</a><a href="https://www.example.com">Link 2</a><input type="text" placeholder="Input 1"><input type="text" placeholder="Input 2"><div>First child</div><div>Second child</div><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
</body>
</html>