css伪类选择器罗列,快来查缺补漏吧

CSS一直在不断演进,引入新的伪类选择器以增强开发者对文档样式的控制能力。hasiswhere是近期较为知名的新增选择器,它们并不在本文涉及范围之内,请移步至专门介绍的文章。以下列出了一些CSS中主要伪类选择器:

  1. :root: 选择文档树的根元素,通常是<html>

  2. :target: 选择当前活动的目标元素,它的id与当前URL的片段标识符匹配。

  3. :empty: 选择没有任何子元素(包括文本节点)的元素。

  4. :not(X): 否定伪类,选择不符合括号里条件的元素。

  5. :first-of-type: 选择属于其父元素的特定类型的第一个元素。

  6. :last-of-type: 选择属于其父元素的特定类型的最后一个元素。

  7. :only-of-type: 选择其类型在所有兄弟元素中唯一的元素。

  8. :only-child: 选择没有兄弟元素的元素。

  9. :nth-child(an+b): 选择其父元素的第an+b个子元素。

  10. :nth-last-child(an+b): 同:nth-child,但是从最后一个子元素开始计数。

  11. :first-child: 选择器匹配作为第一个子元素的元素。

  12. :last-child: 选择器匹配作为最后一个子元素的元素。

  13. :nth-of-type(an+b): 选择属于其父元素的特定类型的一个或多个元素,顺序关系按an+b计算。

  14. :nth-last-of-type(an+b): 同:nth-of-type,但是从最后一个子元素开始计数。

  15. :focus-within: 选择器匹配获得焦点的元素,以及这个元素里面获得焦点的元素。

  16. :fullscreen: 选择当前处于全屏模式的元素。

  17. :hover: 匹配鼠标悬停其上的元素。

  18. :active: 匹配激活状态的元素,通常是鼠标点击不放时的状态。

  19. :checked: 选择每个被选中的input元素(仅适用于单选框和复选框)。

  20. :indeterminate: 选择处于不确定状态的表单元素,如没有选中任何单选按钮或复选框的一组按钮。

  21. :placeholder-shown: 选择显示占位文本的<input><textarea>元素。

  22. :required: 匹配设置了required属性的表单元素。

  23. :optional: 匹配没有required属性的表单元素。

  24. :valid: 匹配所有输入值有效的<input>元素。

  25. :invalid: 匹配所有输入值无效的<input>元素。

  26. :in-range: 匹配属性值在指定范围内的<input>元素。

  27. :out-of-range: 匹配属性值在指定范围外的<input>元素。

  28. :read-only: 选择器匹配没有readonly属性的表单元素。

  29. :read-write: 选择器匹配设有readonly属性的表单元素。

  30. :focus-visible: 用来匹配获得键盘焦点的元素,并且用户代理决定应展示焦点样式。

  31. :default: 选择器匹配一组中默认被选取的<option><button>等元素。

  32. :blank: 匹配空白文本或包含空白(空格、换行等)的元素。

相关推荐
Asize4 小时前
2 道大厂面试题:TS 工具类型我懂了,CSS 3 列布局把我问住了
前端·css·typescript
用户0595401744619 小时前
把 AI 长期记忆去重测试从 20 分钟压到 40 秒,重复率从 18% 干到 1.5%
前端·css
码艺-Alimjan1 天前
横向滚动组件纯用 CSS,丝滑鼠标滚动不许js
javascript·css·计算机外设
砚凝霜1 天前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
breeze jiang2 天前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
何时梦醒2 天前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽2 天前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
BreezeJiang2 天前
写了 display:flex,为什么三栏布局还没完成?
前端·css
用户938515635073 天前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
莫问ABC3 天前
HTML、CSS、JavaScript 前端三件套
前端·css·html