likes
comments
collection
share

CSS3新增伪类选择器有哪些

作者站长头像
站长
· 阅读数 13

CSS3引入了许多新的伪类选择器,用于选择元素的特定状态或位置。如:

  1. :nth-child(n):选择父元素下的第 n 个子元素。
  2. :nth-last-child(n):选择父元素下的倒数第 n 个子元素。
  3. :last-child:选择父元素下的最后一个子元素。
  4. :only-child:选择父元素下唯一的子元素。
  5. :nth-of-type(n):选择父元素下同类型的第 n 个子元素。
  6. :nth-last-of-type(n):选择父元素下同类型的倒数第 n 个子元素。
  7. :first-of-type:选择父元素下同类型的第一个子元素。
  8. :last-of-type:选择父元素下同类型的最后一个子元素。
  9. :only-of-type:选择父元素下同类型的唯一子元素。
  10. :empty:选择没有子元素的元素。
  11. :not(selector):选择不匹配给定选择器的元素。
  12. :target:选择当前活动的目标元素(通常在 URL 锚点中使用)。
  13. :checked:选择被选中的表单元素(如复选框或单选按钮)。
  14. :disabled:选择被禁用的表单元素。
  15. :enabled:选择可用的表单元素。
  16. :root:选择文档的根元素(通常是HTML元素)。
  17. :required:选择必填字段(例如,使用了"required"属性的表单元素)。
  18. :optional:选择可选字段。
  19. :valid:选择合法或有效的表单元素(例如,通过表单验证的元素)。
  20. :invalid:选择无效的表单元素。
  21. :read-only:选择只读的表单元素。
  22. :read-write:选择可读写的表单元素。
  23. :out-of-range:选择表单中超出范围的输入字段。
  24. :in-range:用于选择处于指定范围内的表单元素

这些伪类选择器为我们提供了更多选择和控制元素的方式,以实现特定的样式效果和交互行为。