css使用伪类选择器来选择特定模式的元素

在CSS中,伪类选择器用于选择处于特定状态或符合特定条件的元素。以下是一些常用的伪类选择器,它们可以用来选择特定模式的元素:

:hover:选择鼠标指针浮动在上面的元素。

a:hover {  color: red;  
}

:active:选择并激活的元素,通常用于链接或按钮被点击时。

button:active {  background-color: gray;  
}

:focus:选择获得焦点的元素,例如用户正在输入的输入框。

input:focus {  border: 1px solid blue;  
}

:visited:选择用户已经访问过的链接。

a:visited {  color: purple;  
}

:first-child:选择其父元素的第一个子元素。

p:first-child {  font-weight: bold;  
}

:last-child:选择其父元素的最后一个子元素。

p:last-child {  color: green;  
}

:nth-child(n):选择其父元素的第n个子元素。n可以是数字、关键字(如even或odd),或者是一个公式(如2n或2n+1)。

li:nth-child(2n) {  background-color: gray;  
}

:nth-last-child(n):与:nth-child(n)相反,从最后一个子元素开始计数。

li:nth-last-child(2) {  color: orange;  
}

:first-of-type:选择其父元素中同类型元素的第一个。

p:first-of-type {  font-size: 18px;  
}

:last-of-type:选择其父元素中同类型元素的最后一个。

p:last-of-type {  text-decoration: underline;  
}

:nth-of-type(n):选择其父元素中同类型元素的第n个。

li:nth-of-type(3) {  list-style-type: none;  
}

:nth-last-of-type(n):与:nth-of-type(n)相反,从同类型元素的最后一个开始计数。

li:nth-last-of-type(1) {  text-transform: uppercase;  
}

:not(selector):选择不匹配指定选择器的元素。

div:not(.class-name) {  background-color: lightblue;  
}

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

div:empty {  display: none;  
}

:lang(language):选择指定语言的元素。

p:lang(fr) {  font-style: italic;  
}

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

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

相关文章

高企认定中科技成果转化是什么呢?

其实,这是一个流程,可以用下面的分段进程来表示:企业开展科研立项—科研立项得到科研结果—科研结果用于产品的生产—新产品品质提高带动了销售的增加。 上面的流程,其实是高企审核的核心,不仅仅关系到了量化打分。更…

负阻尼振荡器仿真模拟

负阻振荡器(Negative resistance oscillator)是利用负阻器件抵消回路中的正阻损耗,产生自激振荡的振荡器。由于负阻器件与回路仅有两端连接,故负阻振荡器又称为“二端振荡器”。 阻尼是指阻碍物体的相对运动、并把运动能量转化为…

NVIDIA 推出地球-2云平台,使用AI超级计算机的模拟技术,预测整个地球的气候变化

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

汇编LOG怎么看

一 汇编中常见的数据类型 C 字符 H 半字 F 全字 D 双字 X 十六进制数 B 二进制数 P 压缩十进制数 Z 非压缩十进制数AREA DS CL4 AREA2 DS 4CL1CL4是一个很常见的定义 类似的还有PL5,XL6 第一个定义保留4 个字节的区域,并将该区域的首地址赋予AREA&#xf…

深入理解 Linux 函数参数

在Linux Shell编程中,函数是一种非常有用的功能,它可以将重复的代码封装起来,提高代码的可重用性和可维护性。在本文中,我们将探讨Linux Shell函数及其参数的相关知识。 函数基础 在Linux Shell中,我们可以使用 func…

new mars3d.layer.GeoJsonLayer({的pupup配置参考

new mars3d.layer.GeoJsonLayer({的pupup配置可选项以及相关效果参考: 说明:popup按属性字段配置,可以是字符串模板或数组 1.popup仅配置{type}{name}等属性的的时候,指显示json文件内数据的type与name,效果如下 相关…

MyBatis核心配置文件:解锁数据之美的密码

MyBatis,这位编程的诗人,通过其独特的核心配置文件,为我们描绘出一幅数据之美的画卷。本篇博客将带你深入探讨MyBatis核心配置文件的奥秘,让你能够更好地理解和运用这个优雅的数据持久化框架。 最近想搞私域,欢迎各位…

【MySQL】8. 基本查询(update/delete/聚合/分组)

表的删改 3. Update 语法: UPDATE table_name SET column expr [, column expr ...] [WHERE ...] [ORDER BY ...] [LIMIT ...]对查询到的结果进行列值更新 案例: 3.1 将孙悟空同学的数学成绩变更为 80 分 -- 更新值为具体值 -- 查看原数据 SELECT…

开发指南-1:编码技巧与规范开始

目录 实例 1.使用对象代替if及switch 2.使用Array.from快速生成数组 3.使用router.beforeEach来处理跳转前逻辑 4.使用v-if来优化页面加载 5.路由跳转尽量使用name而不是path 6.使用key来优化v-for循环 7.使用computed代替watch 8.统一管理缓存变量 9.使用setTimeout…

【深度学习】训练Stable Diffusion环境

仓库: https://github.com/bmaltais/kohya_ss.git 基础镜像: from kevinchina/deeplearning:sdxllighting_trt_nginx_002api docker run --net host --gpus device0 -e APIWORKS1 -it t1:t1 bash构建环境: sudo -i git clone https://git…

springboot291校园疫情防控系统

校园疫情防控系统的设计与实现 摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统校园疫情防控信息管理难度…

【Python难点答疑】2、为什么要有@classmethod和@staticmethod,有什么区别?

在 Python 中,staticmethod 和 classmethod 都是用来定义类中的特殊方法的装饰器。它们允许我们定义与类相关的方法,而不需要实例化类。虽然它们都允许我们在类中定义方法,但它们的行为和用法略有不同。 1.静态方法(staticmethod&…

Source Insight关于复制一段代码会自动添加空格或者Tab键的配置取消

Source Insight关于复制一段代码会自动添加空格或者Tab键的配置取消,这个情况在我们复制代码的时候对格式非常不友好,解决办法如下。 如下,我们可以设置相关配置: 设置完成后,然后再去复制,可以看到就没有相…

网络编程:包头分析

一、以太网头 以太网中封装了源mac地址以及目的mac地址,还有ip类型,以太网又称为mac头 0X0800 只接收发往本机的mac的ipv4类型的数据帧 0X0806 只接收发往本机的ARP类型的数据帧 0x8035 只接受发往本机的RARP类型的数据帧 0X0003 接收发往本机的MAC所…

【兆易创新GD32H759I-EVAL开发板】IPA与TLI 图层混合的区别

在GD32H7系列中,IPA(Image Processing Algorithm)和TLI(TFT LCD接口)都支持图层混合功能,提供了丰富的人机界面(HMI)显示能力。尽管这两个特性在图层混合方面有一定的相似性&#xf…

十八、软考-系统架构设计师笔记-真题解析-2022年真题

软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示,图中①、②、③分别与SaaS、PaaS、IaaS相对应,图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…

Jenkins 一个进程存在多个实例问题排查

Jenkins 一个进程存在多个实例问题排查 最近Jenkins升级到2.440.1​版本后,使用tomcat​服务部署,发现每次定时任务总会有3-4个请求到我的机器人上,导致出现奇奇怪怪的问题。 问题发现 机器人运行异常,总有好几个同时请求的服务。…

C++ 模板入门详解

目录 0. 模板引入 1.函数模板 1. 函数重载的缺点 2. 函数模板的概念和格式 2. 函数模板的实例化 2.1 隐式实例化&#xff1a;让编译器根据实参推演模板参数的实际类型 2.2 显式实例化&#xff1a;在函数名后的<>中指定模板参数的实际类型 2.3 函数模板参数的匹…

return code 1 from org.apache.hadoop.hive.ql.ddl.DDLTask

Bug信息 Error: Error while compiling statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.ddl.DDLTask (state=08S01,code=1)Bug产生的代码 修复hive表分区: msck repair table xxxBug原因排查 分区数量过大 这个是网上查看的说如果一次…

单身狗誓必脱单协会群(单身男女可进)

甜甜的恋爱&#xff0c;单身男女可进&#xff0c;谢绝己婚人士和海王进入&#xff01; 发送内容: "单身人士", 申请进群