css3新增的伪类有哪些

北原_春希

于 2024-06-12 20:51:21 发布

阅读量492

点赞数 4

文章标签： css3 前端 java

本文链接：https://blog.csdn.net/ggq53219/article/details/139636401

版权

CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。以下是一些 CSS3 中新增的主要伪类选择器：

结构性伪类：
- :root：选择文档的根元素（通常是 <html>）。
- :empty：选择没有子节点的元素（包括文本节点）。
- :first-of-type：选择其父元素中的第一个 <element-name> 类型的元素。
- :last-of-type：选择其父元素中的最后一个 <element-name> 类型的元素。
- :only-of-type：选择其父元素中唯一的 <element-name> 类型的元素。
- :nth-of-type(n)：选择其父元素中的第 n 个 <element-name> 类型的元素。
- :nth-last-of-type(n)：选择其父元素中的倒数第 n 个 <element-name> 类型的元素。
UI伪类：
- :enabled：选择可用的表单元素。
- :disabled：选择被禁用的表单元素。
- :checked：选择被选中的 <input> 元素（例如，单选框或复选框）。
- :default：选择默认被选中的 <input> 或 <button> 元素。
- :valid：选择输入值有效的表单元素。
- :invalid：选择输入值无效的表单元素。
- :in-range：选择输入值在指定范围内的 <input> 元素。
- :out-of-range：选择输入值不在指定范围内的 <input> 元素。
- :required：选择设置了 required 属性的表单元素。
- :optional：选择没有设置 required 属性的表单元素。
- :readonly：选择设置了 readonly 属性的表单元素。
- :writeable：选择没有设置 readonly 属性的表单元素。
其他伪类：
- :backdrop：用于全屏的背景界面（通常与全屏API一起使用）。
- :fullscreen：选择全屏显示的元素。
- :placeholder-shown：选择当前显示占位符文本的 <input> 或 <textarea> 元素。
- :dir()：基于元素的文本方向（例如 :dir(ltr) 或 :dir(rtl)）来选择元素。
- :lang()：基于元素的语言属性来选择元素。
- :not()：选择不匹配特定选择器的元素。
- :any-link：选择所有链接（<a>、<area> 和 <link> 元素）。
- :current（伪元素）：用于选择当前元素（如 ::current 在 :range 输入类型中）。注意这不是一个标准的 CSS 伪类，但在某些上下文中可能会遇到。

请注意，某些伪类（如 :fullscreen 和 :backdrop）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。同时，:any-link 和 :current 并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。

北原_春希

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3新增的伪类有哪些

CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。请注意，某些伪类（如。
复制链接

扫一扫