CSS3新增伪类选择器有哪些
CSS3引入了许多新的伪类选择器,用于选择元素的特定状态或位置。如:
:nth-child(n)
:选择父元素下的第 n 个子元素。:nth-last-child(n)
:选择父元素下的倒数第 n 个子元素。:last-child
:选择父元素下的最后一个子元素。:only-child
:选择父元素下唯一的子元素。:nth-of-type(n)
:选择父元素下同类型的第 n 个子元素。:nth-last-of-type(n)
:选择父元素下同类型的倒数第 n 个子元素。:first-of-type
:选择父元素下同类型的第一个子元素。:last-of-type
:选择父元素下同类型的最后一个子元素。:only-of-type
:选择父元素下同类型的唯一子元素。:empty
:选择没有子元素的元素。:not(selector)
:选择不匹配给定选择器的元素。:target
:选择当前活动的目标元素(通常在 URL 锚点中使用)。:checked
:选择被选中的表单元素(如复选框或单选按钮)。:disabled
:选择被禁用的表单元素。:enabled
:选择可用的表单元素。:root
:选择文档的根元素(通常是HTML元素)。:required
:选择必填字段(例如,使用了"required"属性的表单元素)。:optional
:选择可选字段。:valid
:选择合法或有效的表单元素(例如,通过表单验证的元素)。:invalid
:选择无效的表单元素。:read-only
:选择只读的表单元素。:read-write
:选择可读写的表单元素。:out-of-range
:选择表单中超出范围的输入字段。:in-range
:用于选择处于指定范围内的表单元素
这些伪类选择器为我们提供了更多选择和控制元素的方式,以实现特定的样式效果和交互行为。
转载自:https://juejin.cn/post/7247540660394278949