css3新增的伪类有哪些

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

  1. 结构性伪类
    • :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> 类型的元素。
  2. 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 属性的表单元素。
  3. 其他伪类
    • :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 伪类,但它们在这里被提及是为了完整性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/26455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用pyqt对yolov5进行简答部署

YOLOv5是一种高效的实时目标检测算法&#xff0c;广泛应用于各类计算机视觉任务中。为了实现便捷的图形用户界面&#xff08;GUI&#xff09;&#xff0c;我们采用了PyQt框架。PyQt是一个Python绑定的Qt库&#xff0c;用于创建跨平台的应用程序。 在本研究中&#xff0c;我们首…

「React」RSC 服务端组件

前言 RSC&#xff08;React Server Components&#xff09;是React框架的一个新特性&#xff0c;它允许开发者编写只在服务器端渲染的组件。与传统的服务器端渲染&#xff08;SSR&#xff09;不同&#xff0c;RSC的目标是提升性能和用户体验&#xff0c;同时减少客户端加载的J…

【每日一练】day3

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; &#x1f388;丠丠64-CSDN博客&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起…

OLED柔性屏的显示效果如何

OLED柔性屏的显示效果非常出色&#xff0c;具有多方面的优势。以下是关于OLED柔性屏显示效果的详细分析&#xff1a; 色彩表现&#xff1a;OLED柔性屏的每个像素都可以独立发光&#xff0c;因此色彩准确性极高。黑色呈现得非常深邃&#xff0c;而亮部则展现出鲜明而生动的细节。…

vue3+electron搭建桌面软件

vue3electron开发桌面软件 最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目. 然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理…

事件、方法实现 on_radioGreen_clicked ,on_chkBoxUnder_clicked,Qfont,QPalette

Vertical Layout 、Horizontal Layout 实验窗体自适应布局 接上篇界面布局&#xff0c; 实验checkBox、radioBox 的事件槽&#xff0c; 使用Qfont组件变更纯文本框QPlainTextEdit中字体的下划线、加粗、斜体效果 使用调色板组QPalette变更纯文本框QPlainTextEdit中文本颜色 UI…

VsCode中C文件调用其他C文件函数失败

之前一直使用CodeBlocks&#xff0c;最近使用vscode多&#xff0c;感觉它比较方便&#xff0c;但在调用其他C文件的时候发现报错以下内容基于单C文件运行成功&#xff0c;否则请移步 博文&#xff1a;VSCode上搭建C/C开发环境 报错信息 没有使用CodeRunner插件&#xff0c;弹…

❤追本溯源篇-林太白

❤追本溯源篇-林太白 总结当前博客下所有的技术和相关文章 (点赞收藏不断更新) 工具使用 ❤ Chrome浏览器使用 设置Chrome浏览器 http://t.csdnimg.cn/P68jK

DDei在线设计器-配置主题风格

DDeiCore-主题 DDei-Core插件提供了默认主题和黑色主题。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 默认主题 黑色主题 使用指南 引入 import { DDeiCoreThemeBlack } from "ddei-editor";使用并修改设置 extensions: [......//通过配置&am…

Java对指定不规则的jsonString读取并操作

当我们在做项目的时候有时候会对接第三方的接口&#xff0c;假如对方返回的结果是一个不规则的json字符串&#xff0c;这个时候我们就需要对于返回结果一条一条的进行读取并操作&#xff1a; 一、json例子&#xff1a;不是数组&#xff0c;单纯的只是一行一行的数据 {"n…

Web前端右侧悬浮:实现技巧与深度解析

Web前端右侧悬浮&#xff1a;实现技巧与深度解析 在Web前端开发中&#xff0c;右侧悬浮功能作为一种常见的交互设计元素&#xff0c;能够为用户提供便捷的操作入口&#xff0c;提升用户体验。然而&#xff0c;实现这一功能却并非易事&#xff0c;需要开发者掌握一定的技巧和方…

机器学习在医学领域中的应用|文献精析·24-06-13

小罗碎碎念 2024-06-13&#xff5c;文献精析&#xff1a;机器学习在医学领域中的应用 为了系统性地和大家梳理一下机器学习在医学领域中的应用&#xff0c;我特意去找了一篇文献&#xff0c;把其中有价值的信息筛选出来了。但是我没选的内容不代表不重要&#xff0c;感兴趣的可…

一文讲清:bom管理系统是什么?在生产管理中有什么作用?

在制造业中&#xff0c;物料清单&#xff08;Bill of Materials&#xff0c;简称BOM&#xff09;扮演着至关重要的角色。物料清单&#xff08;BOM&#xff09;是制造或维修产品所需的材料、组件和零件的结构化综合列表&#xff0c;以及所需材料的数量、名称、描述和成本。简而言…

解释 RESTful API, 如何使用它构建 web 应用程序

RESTful API&#xff08;Representational State Transfer&#xff09;是一种设计风格和架构原则&#xff0c;用于构建可扩展和可维护的网络应用程序。它基于 HTTP 协议&#xff0c;并使用标准的 HTTP 方法&#xff08;GET、POST、PUT、DELETE&#xff09;来执行对资源的操作。…

Web前端项目实例描述:构建交互式在线书店

Web前端项目实例描述&#xff1a;构建交互式在线书店 在数字化时代&#xff0c;Web前端技术发挥着至关重要的作用&#xff0c;它为用户提供了直观、友好的界面体验。本次&#xff0c;我将为大家详细描述一个Web前端项目实例——构建交互式在线书店。该项目涵盖了多个关键方面&…

ssm学生成绩管理系统-海豚

ssm学生成绩管理系统-海豚 ssm学生成绩管理系统。 功能:登录&#xff0c;学生信息管理&#xff0c;课程信息&#xff0c;成绩信息&#xff0c; 技术&#xff1a;java&#xff0c;ssm&#xff0c;mybatics&#xff0c;jsp 平台&#xff1a;eclispe或者idea&#xff0c;mysql5.7…

使用Spring AI 和 LLM 实现数据库查询

AIDocumentLibraryChat 项目已扩展为支持提问来搜索关系数据库。用户可以输入一个问题&#xff0c;然后嵌入搜索相关的数据库表和列来回答问题。然后&#xff0c;LLM 获取相关表的数据库架构&#xff0c;并根据找到的表和列生成一个 SQL 查询&#xff0c;来展示结果回答问题。 …

Beyond Compare 提示“缺少评估信息或损坏”,无法打开只要操作一行命令就可以了

在CMD 或者powershell下执行如下命令重新打开即可。 reg delete "HKEY_CURRENT_USER\Software\Scooter Software\Beyond Compare 4" /v CacheID /f重新打开&#xff0c;就ok 了

计算机视觉的详细学习计划

### 第一阶段&#xff1a;基础知识&#xff08;1-2个月&#xff09; #### 数学基础 - **线性代数**&#xff1a; - 课程&#xff1a;Khan Academy的线性代数课程 - 书籍&#xff1a;David C. Lay的《Linear Algebra and Its Applications》 - **微积分**&#xff1a; - …

express入门03增删改查

目录 1 搭建服务器2 静态文件托管3 引入bootstrap4 引入jquery5 编写后端接口5.1 添加列表查询方法5.2 添加路由5.3 添加数据表格 总结 我们前两篇介绍了如何利用express搭建服务器&#xff0c;如何实现静态资源托管。那利用这两篇的知识点&#xff0c;我们就可以实现一个小功能…