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

news/2024/4/27 14:00:54

在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.cpky.cn/p/11003.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

【开源】SpringBoot框架开发知识图谱构建系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 知识图谱模块2.2 知识点模块2.3 学生测评模块2.4 学生成绩模块 三、系统展示四、核心代码4.1 查询知识点4.2 新增知识点4.3 查询知识图谱4.4 查询学生成绩4.5 查询学生成绩 五、免责说明 一、摘要 1.1 项目介绍 基于J…

大学教材《C语言程序设计》(浙大版)课后习题解析 | 第一、二章

概述 本文主要提供《C语言程序设计》(浙大版) 第一、二章课后习题解析,以方便同学们完成题目后作为参考对照。后续将写出三、四章节课后习题解析,如想了解更多,请持续关注该专栏。 专栏直达链接:《C语言程序设计》(浙大版)_孟俊宇…

如何安全出金入金!!!资金裸奔?资金冻结??

大家好,我是吴军,目前担任一家软件开发公司的产品经理。近期,银行风控问题引起了广泛关注,不论是电商还是其他各行各业,大额资金交易和银行卡使用都受到了严格限制。 对于做生意的老板们来说,资金的安全与流…

流畅的 Python 第二版(GPT 重译)(九)

第四部分:控制流 第十七章:迭代器、生成器和经典协程 当我在我的程序中看到模式时,我认为这是一个麻烦的迹象。程序的形状应该只反映它需要解决的问题。代码中的任何其他规律性对我来说都是一个迹象,至少对我来说,这表…

vue3与Electron构建跨平台应用(webpack)

一、创建vue3项目 vue create vue3_webpack_electron 二、安装Electron npm install --save-dev electron Electron 三、vue add electron-builder vue add electron-builder

JAVA实战开源项目:厦门旅游电子商务预订系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 景点类型模块2.2 景点档案模块2.3 酒店管理模块2.4 美食管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 学生表3.2.2 学生表3.2.3 学生表3.2.4 学生表 四、系统展示五、核心代码5.1 新增景点类型5.2 查询推荐的…