1. 结构性伪类：
- :first-child：选择父元素下的第一个子元素。
- :last-child：选择父元素下的最后一个子元素。
- :nth-child(n)：选择父元素下的第 n 个子元素，其中 n 是一个整数或公式。
- :nth-last-child(n)：选择父元素下的倒数第 n 个子元素。
ul li:first-child {
/* 选择 ul 下的第一个 li 元素 */
font-weight: bold;
}
2. 链接伪类：
- :link：选择尚未被访问的链接。
- :visited：选择已经被访问的链接。
- :hover：选择鼠标悬停的元素。
- :active：选择鼠标点击的元素。
a:link {
/* 选择尚未被访问的链接的样式 */
color: blue;
}
3. 表单伪类：
- :checked：选择被选中的表单元素，通常用于复选框和单选按钮。
- :disabled：选择被禁用的表单元素。
- :enabled：选择可用的表单元素。
input:checked {
/* 选择被选中的复选框或单选按钮 */
background-color: yellow;
}
4. 位置伪类：
- :first-of-type：选择同类型元素中的第一个。
- :last-of-type：选择同类型元素中的最后一个。
- :nth-of-type(n)：选择同类型元素中的第 n 个。
- :nth-last-of-type(n)：选择同类型元素中的倒数第 n 个。
p:first-of-type {
/* 选择文档中第一个 p 元素 */
font-size: 18px;
}
5. 其他伪类：
- :focus：选择当前获取焦点的元素。
- :not(selector)：选择不匹配给定选择器的元素。
input:focus {
/* 选择当前获取焦点的输入框 */
border: 2px solid blue;
}
这只是一些 CSS 伪类的例子，还有许多其他伪类可以用于更精确地选择元素，具体取决于你的设计和交互需求。
转载请注明出处：http://www.zyzy.cn/article/detail/4012/CSS