css伪类和伪元素选择器

伪类选择器关注元素的状态和条件,而伪元素选择器则关注元素的视觉表现和扩展。两者都是CSS中强大的工具,能够帮助开发者实现复杂的样式布局和交互效果。

伪类选择器

伪类选择器在CSS中用于选择元素的特定状态或位置。以下是一些常见的伪类选择器及其使用示例:

1. :hover

用于选择鼠标悬停时的元素。

button:hover {background-color: blue;
}

当鼠标悬停在button元素上时,其背景颜色会变成蓝色。

2. :active

用于选择被用户激活的元素,如点击的按钮。

button:active {transform: scale(0.95);
}

当按钮被点击时,它会稍微缩小。

3. :focus

用于选择获得焦点的元素,如输入框。

input:focus {border: 2px solid red;
}

当输入框获得焦点时,其边框会变成红色。

4. :visited

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

a:visited {color: purple;
}

用户访问过的链接文字颜色会变成紫色。

5. :first-child

用于选择其父元素的第一个子元素。

ul li:first-child {color: green;
}

无序列表中的第一个列表项的文字颜色会变成绿色。

6. :last-child

用于选择其父元素的最后一个子元素。

ul li:last-child {font-weight: bold;
}

无序列表中的最后一个列表项的字体加粗。

7. :nth-child(n)

用于选择其父元素的第n个子元素。

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

无序列表中的偶数列表项的背景颜色会变成浅灰色。

8. :not(selector)

用于选择不匹配指定选择器的元素。

button:not(.disabled) {cursor: pointer;
}

除了class为disabled的按钮外,其他按钮的鼠标光标会变成手形。

9. :empty

用于选择没有子元素的元素。

div:empty {display: none;
}

没有子元素的div元素将不会显示。

10. :first-of-type:last-of-type

用于选择其父元素的第一个或最后一个特定类型的子元素。

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

每个div元素中的第一个p元素的字体大小设置为18像素。

11. :checked

用于选择被选中的表单元素,如单选按钮或复选框。

input[type="checkbox"]:checked {border: 2px solid black;
}

被选中的复选框边框会变成黑色。
这些伪类选择器可以与基本选择器、属性选择器等其他选择器结合使用,以实现更复杂的样式效果。需要注意的是,伪类选择器的优先级通常高于普通的选择器,因此在处理样式覆盖问题时需要特别注意。

伪元素

伪元素是CSS中一种特殊的选择器,它们允许开发者在元素的特定位置插入内容或装饰。以下是伪元素的几个示例说明:

::before 伪元素

::before 伪元素用于在选定元素的内容之前插入内容。这通常与 content 属性一起使用,以定义要插入的具体内容。
示例:

p::before {content: "Read this";color: blue;
}

在这个例子中,每个 <p> 元素的内容之前都会插入文本 "Read this: ",并且这段文本的颜色为蓝色。

::after 伪元素

与 ::before 类似,::after 伪元素用于在选定元素的内容之后插入内容。
示例:

p::after {content: "(End of paragraph)";font-style: italic;
}

在这个例子中,每个 <p> 元素的内容之后都会插入一段斜体的文本 " (End of paragraph)"。

::first-line 伪元素

::first-line 伪元素用于向文本的首行应用样式。
示例:

p::first-line {text-transform: uppercase;
}

在这个例子中,每个 <p> 元素的首行文本都会转换为大写。

::selection 伪元素

::selection 伪元素用于定义用户选中文本时的显示样式(如背景色和文本色)。
示例:

::selection {background: yellow;color: black;
}

在这个例子中,当用户选中页面上的任何文本时,选中的文本背景色将变为黄色,文本颜色变为黑色。

这些伪元素提供了在不修改HTML结构的情况下,向页面元素添加额外内容或特殊视觉效果的能力,是CSS中非常有用的工具。需要注意的是,伪元素以双冒号(::)开头是为了区分伪类和伪元素,尽管在大多数现代浏览器中,单冒号(:)也是有效的。然而,为了遵循CSS规范,建议使用双冒号来表示伪元素。

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

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

相关文章

LeetCode:2288.价格减免(Java 字符串处理)

目录 2288.价格减免 题目描述&#xff1a; 实现代码与解析&#xff1a; 模拟 原理思路&#xff1a; 2288.价格减免 题目描述&#xff1a; 句子 是由若干个单词组成的字符串&#xff0c;单词之间用单个空格分隔&#xff0c;其中每个单词可以包含数字、小写字母、和美元符号…

AV1:帧间预测(一)参考帧管理

​AV1中帧类型 在H.26X系列标准中&#xff0c;根据帧允许的预测模式可以将帧分为I帧、P帧和B帧&#xff0c;根据帧在码流中前后的参考关系又可以分为IRAP、RADL等。AV1也类似地将帧分为4种类型&#xff0c;在码流中用frame_type来标识帧类型。 KEY_FRAME&#xff1a;相当于IDR帧…

HTB Editorial

Editorial User Nmap ┌──(kali㉿kali)-[~/…/machine/SeasonV/linux/Editorial] └─$ nmap -A 10.129.24.67 -T 4 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-06-16 21:54 EDT Nmap scan report for 10.129.2…

C#使用轻量级深度学习模型进行车牌颜色识别和车牌号识别

看到这个文章时候请注意这个不涉及到车牌检测&#xff0c;这个仅仅是车牌颜色和车牌号识别&#xff0c;如果想涉及到车牌检测可以参考这个博客&#xff1a;[C#]winform部署yolov7CRNN实现车牌颜色识别车牌号检测识别_c# yolo 车牌识别-CSDN博客 【训练源码】 https://github.…

DBeaver windows下载、安装与连接数据库

下载 官网下载地址&#xff1a;https://dbeaver.io/download/ 安装 1、双击安装 2、下一步…… 选择所有用户 3、组件选择 配置连接数据库 下载驱动

【记录44】【案例】echarts地图

效果&#xff1a;直接上效果图 环境&#xff1a;vue、echarts4.1.0 源码 // 创建容器 <template><div id"center"></div> </template>//设置容器大小&#xff0c;#center { width: 100%; height: 60vh; }这里需注意&#xff1a;笔者在echar…

Git的下载安装及可视化工具小乌龟

一、 Git 的下载 第1步&#xff1a;下载Git&#xff0c;下载地址&#xff1a;Git for Windows 这个就需要去 Git 官网下载对应系统的软件了&#xff0c;下载地址为 git-scm.com或者gitforwindows.org&#xff0c;或者阿里镜像&#xff08;感谢评论区的星悸迷航同学&#…

亚马逊收购 MX Player

不知道你在安卓手机上用什么视频播放器&#xff0c;个人看最强大的就是MX Player&#xff08;支持快进、倍速、睡眠定时、自定义解码器、AB段重复等&#xff0c;学英语十分强大&#xff09;。 MX Player 最初是韩国的视频播放软件和OTT服务平台&#xff0c;于2011年推出&#…

什么是云恶意软件攻击,如何进行有效的防护

一切都在向云转移。云端数据越多&#xff0c;恶意攻击者攻击云平台的兴趣就越大。 攻击者使用恶意软件窃取数据并破坏服务。虽然恶意软件在云端可能不像在个人电脑上那么普遍&#xff0c;但大行其道的云恶意软件令人担忧。此外&#xff0c;组织不像您预料的那样意识到这点。 …

鸿蒙开发网络管理:【@ohos.request (上传下载)】

上传下载 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import request from ohos.request;限制与约束 默认支持https&#xff0c;如果要支持http&#xff0c;需要在config.json里…

所以spring mvc异常处理工作原理是啥

文章目录 spring mvc异常处理&#xff08;源码分析&#xff09;概述原理&#xff08;源码角度&#xff09;模拟debug前期提要分析4个map4个map的初始化为什么需要基于mappedMethods缓存 总结一下 spring mvc异常处理&#xff08;源码分析&#xff09; 概述 spring mvc有下面三…

力扣每日一题 6/18 字符串/模拟

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2288.价格减免 【中等】 题目&#xff1a; 句子 是由若干个单词组成的字符…

‘引爆增长·赋能十堰’第一届学习峰会在十堰东方汉宫国际酒店成功举办

‘引爆增长赋能十堰’第一届学习峰会在十堰东方汉宫国际酒店成功举办 2024年6月 17 至18 日&#xff0c;为期两天的“引爆增长赋能十堰”第一届学习交流峰会在湖北十堰东方汉宫国际酒店一号盛大举行&#xff0c;学习峰会现场&#xff0c;来自十堰地区及邻边地市的上百位实体企业…

netty服务端与客户端的启动流程

如图所示&#xff0c;右侧是服务端Server&#xff0c;左侧是客户端Client 要点说明&#xff1a; 1.在Server中&#xff0c;在NioEventLoopGroup()中&#xff0c;会有1个selector和线程在不断循环&#xff0c;等待是否有accept事件&#xff0c;在accept事件发生后&#xff0c;才…

四款让人大开眼界的高质量软件,个个实力超群,使用起来爱不释手

电脑里的Windows软件&#xff0c;简直多得数不清&#xff0c;啥都有。 像那个电子表格、写文章的、玩游戏聊天的、还有修图的&#xff0c;这些都太常见了&#xff0c;它们确实给咱们生活带来方便&#xff0c;但有时候也会让那些不太懂电脑的小伙伴们头疼不已。 讲真&#xff0…

重学java 73.设计模式

本想送你一本沉思录&#xff0c;可该迷途知返的人是我 —— 24.6.18 设计模式 设计模式(Design pattern)&#xff0c;是一套被反复使用、经过分类编目的、代码设计经验的总结&#xff0c;使用设计模式是为了可重用代码、保证代码可靠性、程序的重用性,稳定性。 1995 年&#x…

全网最全 Kimi 使用手册,看完 Kimi 效率提升 80%

在当前AI文字大模型领域&#xff0c;ChatGPT4.0无疑是最强大。然而&#xff0c;最近最火爆的大模型非国产Kimi莫属。 相较于其它大模型&#xff0c;Kimi 最大的优势在于&#xff0c;超长文本输入&#xff0c;支持200万汉字&#xff0c;是全球范围内罕见的超长文本处理工具&…

在Linux系统中安装凸语言

凸语言在2023国产编程语言蓝皮书中的介绍如下&#xff1a; 凸语言gitee页面&#xff1a;凸语言: tu-lang 是一种动态类型编译型的通用编程语言, 已实现自举 (gitee.com) 使用git克隆源码&#xff1a; git clone https://github.com/tu-lang/tu.git 安装凸语言环境&#xff1a…

qt使用信号槽时,一直提示无法解析的外部符号

今天写了个信号槽时&#xff0c;粗心大意在发信号的类的头文件中忘记加上Q_OBJECT&#xff0c;导致一直出现无法解析的外部符号&#xff0c; 信号没有在类声明中使用 Q_OBJECT 宏。这个宏是必需的&#xff0c;因为它告诉 Qt 的元对象编译器&#xff08;moc&#xff09;需要处理…

文件系统崩溃一致性、方法、原理与局限

前言 先提几个问题&#xff1a;什么是文件系统崩溃一致性&#xff1f;为什么会出现文件系统崩溃一致性问题&#xff1f;有哪些方法可以解这个问题&#xff1f;它们各自又有哪些局限性&#xff1f; window系统电脑异常后会蓝屏、手机死机卡顿后我们会手动给它重启&#xff0c;大…