CSS3新增伪类有哪些并简要描述

news/2025/1/12 9:38:13/文章来源:https://www.cnblogs.com/ai888/p/18666631

CSS3新增的伪类包括多种,它们为前端开发者提供了更多的选择和灵活性,以便更好地控制页面元素的样式。以下是一些CSS3中新增的重要伪类及其简要描述:

  1. :nth-child(n):此伪类允许开发者根据元素在父元素中的位置来选择元素。例如,:nth-child(2)会选择父元素中的第二个子元素,不论其类型。
  2. :nth-of-type(n):与:nth-child()类似,但此伪类是基于元素类型的。它选择父元素中特定类型的第n个子元素。例如,p:nth-of-type(3)会选择父元素中的第三个段落元素。
  3. :last-child:此伪类选择父元素中的最后一个子元素,不考虑元素类型。
  4. :last-of-type:与:last-child类似,但它是基于元素类型的。它选择父元素中最后一个特定类型的子元素。
  5. :not(selector):此伪类用于选择不匹配指定选择器的元素。例如,:not(p)会选择所有不是段落元素的元素。
  6. :checked:此伪类选择被选中的单选按钮、复选框或选项。
  7. :focus:此伪类选择当前获得焦点的元素,如输入框或链接。
  8. :empty:此伪类选择没有子元素的元素。
  9. :enabled:disabled:这两个伪类分别选择启用或禁用的表单元素。
  10. :only-child:此伪类选择父元素中唯一的子元素,不考虑元素类型。
  11. :only-of-type:与:only-child类似,但它是基于元素类型的。它选择父元素中唯一的特定类型的子元素。

此外,还有一些其他有用的伪类,如:root(选择文档的根元素,即html元素)、:nth-last-child(n)(选择父元素中从后往前数的第n个子元素)、:nth-last-of-type(n)(选择父元素中从后往前数的第n个特定类型的子元素)以及:target(选择URL的片段标识符所指向的元素)。

这些新增的伪类为前端开发者提供了更多的工具来精确控制页面元素的样式,从而增强了网页的交互性和用户体验。

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

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

相关文章

读量子霸权01硅时代的终结

硅时代的终结1. 量子计算机 1.1. 一种全新型计算机,在处理特定任务时能明显超越普通数字超级计算机1.1.1. 谷歌宣称自己研发的量子计算机Sycamore可以在200秒以内解决世界上最快的数字超级计算机花1万年才能完成的数学问题1.1.1.1. 谷歌的Sycamore量子计算机就是全球第一台实现…

合成橡胶 2025

1月12日: C浪反弹进行中 目前在走C-3

转:celery 常用执行命令

转自:https://blog.csdn.net/weixin_44649870/article/details/105844668celery 常用执行命令详解执行命令celery -A test-1.celery worker -n name-1 --loglevel=info --max-tasks-per-child 500 --autoscale=4,1 -Q q-1常用参数参数 说明-A / --app 要使用的应用程序实例-n …

VMware ESXi 8.0U3c macOS Unlocker OEM BIOS 集成驱动版,新增 12 款 I219 网卡驱动

VMware ESXi 8.0U3c macOS Unlocker & OEM BIOS 集成驱动版,新增 12 款 I219 网卡驱动VMware ESXi 8.0U3c macOS Unlocker & OEM BIOS 集成驱动版,新增 12 款 I219 网卡驱动 VMware ESXi 8.0U3c macOS Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版…

vue3从入门到入坑-第1坑

这是我2025年入门学习Vue的新年第一个坑啊。先看问题: <template><el-table :data="footerLinks" stripe style="width: 100%"><el-table-column prop="linkName" label="链接名称" width="180" /><e…

OpenVX生命周期

生命周期 1. OpenVX 上下文生命周期 OpenVX上下文的生命周期非常简单,如图2-7所示。图2-7.OpenVX 上下文的生命周期模型 2.图形生命周期 如图2-8所示,OpenVX在图形生命周期中,有以下四个主要阶段。 1)构造:图形通过vxCreateGraph创建,节点通过数据对象连接在一起。 2)验…

python logger loguru 日志 超好用

python logger loguru 日志 超好用pip install xdeek-loggerfrom xdeek_logger import MyLoggerif __name__ == __main__:import timeimport jsonimport asyncio# 初始化日志记录器# 替换为真实的远程日志收集URL,或者设置为 Noneremote_log_url = "https://your-logging…

推荐4本书《智能汽车传感器:原理设计应用》、《LLVM编译器原理与实践》、《TVM编译器原理与实践》、《AI芯片开发核心技术详解》

4本书推荐《AI芯片开发核心技术详解》、《智能汽车传感器:原理设计应用》、《TVM编译器原理与实践》、《LLVM编译器原理与实践》由清华大学出版社资深编辑赵佳霓老师策划编辑的新书《AI芯片开发核心技术详解》已经出版,京东、淘宝天猫、当当等网上,相应陆陆续续可以购买。该…

设置环境变量

根据环境变量调整行为 $version =(isset($_SERVER[SITE_VERSION]) ? $_SERVER[SITE_VERSION] : guest); //如果用户未能正确登录,重定向到http://guest.example.com if(members == $version){ if(!authenticate_user($_POST[username],$_POST[password])){ header(Location: …

读取环境变量

问题 希望得到一个环境变量的值。 解决方案 使用getenv(): $path = getenv(PATH);如果将PHP作为一个ISAPI模块运行,getenv()数则不可用。

你必须会的LVS高可用负载均衡方案

前言 在业务量达到一定量的时候,往往单机的服务是会出现瓶颈的。此时最常见的方式就是通过负载均衡来进行横向扩展。其中我们最常用的软件就是 Nginx。通过其反向代理的能力能够轻松实现负载均衡,当有服务出现异常,也能够自动剔除。但是负载均衡服务自身也可能出现故障,因此…

【搭建监控系统】搭建prometheus+grafana监控系统抓取Linux主机系统资源数据

Prometheus 和 Grafana 是两个非常流行的开源工具,通常结合使用来实现监控、可视化和告警功能。 它们在现代 DevOps 和云原生环境中被广泛使用。 1、Prometheus 定义: Prometheus 是一个开源的系统监控和告警工具包,最初由 SoundCloud 开发,现在是 CNCF(云原生计算基金会)…