css3伪类选择器有哪些
CSS3 伪类选择器用于选择 HTML 元素的特定状态或位置,以及根据用户的互动来应用样式。以下是一些常用的 CSS3 伪类选择器,并提供简要介绍:
本文文章目录
- 1. :hover - 鼠标悬停伪类选择器
- 2. :active - 激活伪类选择器
- 3. :focus - 焦点伪类选择器
- 4. :visited - 访问链接伪类选择器
- 5. :nth-child() - 子元素序号伪类选择器
- 6. :nth-of-type() - 同类型子元素序号伪类选择器
- 7. :first-child - 第一个子元素伪类选择器
- 8. :last-child - 最后一个子元素伪类选择器
- 9. :not() - 非选择器
- 0. :empty - 空元素伪类选择器
- 1. :checked - 选中状态伪类选择器
- 2. :disabled - 禁用状态伪类选择器
- 3. :enabled - 启用状态伪类选择器
- 总结
1. :hover - 鼠标悬停伪类选择器 - 当鼠标悬停在元素上时应用样式。通常用于创建交互效果。
2. :active - 激活伪类选择器 - 当元素被激活(例如,鼠标单击按钮时)时应用样式。
3. :focus - 焦点伪类选择器 - 当元素获得焦点(通常是通过键盘导航或点击输入框)时应用样式。
4. :visited - 访问链接伪类选择器 - 用于选择已访问的链接,以便为其应用不同的样式。但出于隐私和安全原因,对 :visited 的样式设置有限制。
5. :nth-child() - 子元素序号伪类选择器 - 允许根据子元素的位置来选择元素,例如:nth-child(odd) 选择奇数位置的子元素。
6. :nth-of-type() - 同类型子元素序号伪类选择器 - 类似于:nth-child(),但仅考虑同类型的子元素。
7. :first-child - 第一个子元素伪类选择器 - 选择父元素的第一个子元素。
8. :last-child - 最后一个子元素伪类选择器 - 选择父元素的最后一个子元素。
9. :not() - 非选择器 - 用于排除满足特定条件的元素,例如:not(.class) 将选择不具有指定类的元素。
10. :empty - 空元素伪类选择器 - 选择没有任何子元素或文本内容的元素。
11. :checked - 选中状态伪类选择器 - 用于选择表单元素中被选中的复选框或单选按钮。
12. :disabled - 禁用状态伪类选择器 - 选择表单元素中被禁用的元素。
13. :enabled - 启用状态伪类选择器 - 选择表单元素中可用的元素。
总结:
这些是一些常见的 CSS3 伪类选择器,它们可以帮助您根据不同的条件选择和样式化页面上的元素。您可以根据具体的需求使用这些伪类选择器来创建各种样式和交互效果。