首页 前端知识 css3 中的伪类和伪元素

css3 中的伪类和伪元素

2024-08-14 00:08:47 前端知识 前端哥 744 856 我要收藏

什么是伪类,什么是伪元素

伪类是用来添加特殊状态的选择器,它们以冒号(:)开头。伪类可以添加到任何现有的选择器上,用来选择处于特定状态的元素。
伪元素是用来选择元素的特定部分的选择器,它们以双冒号(::)开头。伪元素可以创建出在文档树中不存在的元素。

css3 中常见的伪类:

  1. :root - 选择文档的根元素
  2. :nth-child(n) - 匹配父元素中的第n个子元素
  3. :nth-last-child(n) - 匹配父元素中的倒数第n个子元素
  4. :nth-of-type(n) - 匹配父元素中相同类型的第n个子元素
  5. :nth-last-of-type(n) - 匹配父元素中相同类型的倒数第n个子元素
  6. :first-child - 匹配父元素中的第一个子元素
  7. :last-child - 匹配父元素中的最后一个子元素
  8. :first-of-type - 匹配父元素中相同类型的第一个子元素
  9. :last-of-type - 匹配父元素中相同类型的最后一个子元素
  10. :only-child - 匹配父元素中唯一的子元素
  11. :only-of-type - 匹配父元素中唯一的相同类型子元素
  12. :empty - 匹配没有子元素(包括文本节点)的元素
  13. :target - 匹配URL的锚点引用的元素
  14. :enabled - 匹配可用的表单控件元素
  15. :disabled - 匹配禁用的表单控件元素
  16. :checked - 匹配被选中的表单控件元素(如单选框、复选框)
  17. :indeterminate - 匹配处于不确定状态的表单控件元素
  18. :valid - 匹配通过验证的表单控件元素
  19. :invalid - 匹配没有通过验证的表单控件元素
  20. :in-range - 匹配其值在指定范围内的元素
  21. :out-of-range - 匹配其值超出指定范围的元素
  22. :required - 匹配有required属性的表单控件元素
  23. :optional - 匹配没有required属性的表单控件元素
  24. :read-only - 匹配只读属性为true的表单控件元素
  25. :read-write - 匹配可读写的表单控件元素
  26. :lang(language) - 匹配指定语言的元素
  27. :not(selector) - 匹配不符合指定选择器的元素
  28. :hover - 匹配鼠标悬停在其上的元素
  29. :active - 匹配当前被激活的元素
  30. :focus - 匹配当前获得焦点的元素
  31. :visited - 匹配已被访问过的链接元素

CSS3伪元素:

  1. ::before - 在元素内容之前插入生成内容
  2. ::after - 在元素内容之后插入生成内容
  3. ::first-line - 选择元素中的第一行
  4. ::first-letter - 选择元素中的第一个字母
  5. ::selection - 选择被用户选中的部分
  6. ::placeholder - 选择表单控件的占位符
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15441.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!