CSS选择器:一文带你区分CSS中的伪类和伪元素!

一、伪类选择器

1、什么是伪类选择器

伪类选择器,顾名思义,是一种特殊的选择器,它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的,而是由用户行为(如点击、悬停)或元素的状态(如被访问、被禁用)来定义的。

例如,我们可以用伪类选择器来改变链接在不同状态下的颜色,从而给用户以视觉反馈。

2、伪类选择器的语法 

selector:pseudo-class {property: value;
}a:link {color: #FF0000;
}input:focus {background-color: yellow;
}

注意:伪类名称对大小写不敏感;

3、常用的伪类选择器

下面分别介绍一下比较常用几类伪类选择器:

3.1 动态伪类选择器

这类选择器主要用于描述用户与元素的交互状态。例如:

1):hover:当鼠标悬停在元素上时的样式。

代码示例:将链接的文本颜色改为红色

a:hover {color: red;
}

2):active:当元素被用户激活(如点击)时的样式。

代码示例:将按钮的背景色改为蓝色

button:active {background-color: blue;
}

3):focus:当元素获得焦点(如输入框被点击)时的样式。

代码示例:将输入框的边框颜色改为绿色

input:focus {border-color: green;
}

4):visited:用于设置已访问链接的样式,通常与:link一起使用来区分未访问和已访问的链接。

代码示例:将已访问链接的颜色改为紫色

a:visited {color: purple;
}

3.2 UI元素状态伪类选择器

这类选择器用于描述元素在用户界面中的状态。例如:

1):enabled和:disabled:用于表单元素,表示元素是否可用。

示例:将禁用的输入框的边框颜色改为灰色

input:disabled {border-color: gray;
}

2):checked:用于单选框或复选框,表示元素是否被选中。

示例:将选中的单选框的背景色改为黄色

input[type="radio"]:checked {background-color: yellow;
}

3.3 结构伪类选择器

这类选择器用于根据元素在文档结构中的位置来选择元素。例如:

1):first-child:选取父元素的第一个子元素。

示例:将列表中的第一个项目的背景色改为绿色:

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

2):last-child:选取父元素的最后一个子元素。

示例:将列表中的最后一个项目的背景色改为红色:

li:last-child {background-color: red;
}

3):nth-child(n):选取父元素中第n个子元素。

示例:将列表中的奇数位置的项目的背景色改为蓝色:

li:nth-child(odd) {background-color: blue;
}

3.4 否定伪类选择器

这类选择器用于排除符合特定条件的元素。例如:

:not(selector):选取不符合括号内选择器的所有元素。

示例:将不是段落的元素的背景色改为灰色:

*:not(p) {background-color: gray;
}

动图封面

4、常见应用

  • 设置鼠标悬停在元素上时的样式;
  • 为已访问和未访问链接设置不同的样式;
  • 设置元素获得焦点时的样式;
// 示例:a 标签的四种状态,分别对应 4 种伪类;/* 未访问的链接 */
a:link {color: blue;
}/* 已访问的链接 */
a:visited {color: red;
}/* 鼠标悬停链接 */
a:hover {color: orange;
}/* 已选择的链接(鼠标点击但不放开时) */
a:active {color: #0000FF;
}

注意:

  • a 标签的 4 个伪类(4种状态)必须按照一定顺序书写,否则将会失效;
  • a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效;
  • a:active 必须在 CSS 定义中的 a:hover 之后才能生效;
  • 书写顺序为:a:link、a:visited、a:hover、a:active;
  • 记忆方法:love hate - “爱恨准则”;

二、伪元素选择器

1、什么是伪元素选择器

与伪类选择器不同,伪元素选择器是用来选择DOM元素的特定部分,而不是整个元素。它们通常用于处理那些不是由HTML标签直接表示的内容,比如首行文字、首字母或者生成的内容(如内容前面的编号)。

伪元素选择器允许我们对页面上的某些部分进行精确的样式控制,而这些部分在HTML结构中并不存在。

想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种 辅助工具和资料,非常适合新手! 点这里前往学习哦!

2、伪元素选择器语法

selector::pseudo-element {property: value;
}p::first-line {color: #ff0000;
}h1::before {content: '♥';
}

3、常用伪元素选择器

伪元素选择器并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种常用伪元素选择器:first-line、 first-letter、 before、after。

3.1 ::first-line

::first-line表示第一行(第一行内容根据屏幕大小来决定显示多少字),例如: p::first-line{}。

代码示例:

    <style>p::first-line{color: blue;}</style>

3.2 ::first-letter

::first-letter表示第一个字母,例如:p::first-letter{}。

代码示例:

    <style>p::first-letter{font-size: 30px;color: blueviolet;}
</style>

3.3 ::before和::after

::before表示元素的开始,::after表示元素的最后,before和after必须结合content属性来使用。

代码示例:

    <style>p::after{content: "hahaha";color: red;}p::before{content: "hehehe";color: coral;}
</style>

注意:

  • before和after创建一个元素,但是属于行内元素。
  • 新创建的这个元素在文档中是找不到的,所以我们称为伪元素。
  • before在父元素内容的前面创建元素,after在父元素内容的后面插入元素。
  • 伪元素选择器和标签选择器一样,权重为1。

三、伪类与伪元素选择器的区别

CSS中的伪类选择器和伪元素选择器都是用来选取DOM中特定元素的选择器。具体区别如下:

  • 伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素;
  • 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
  • 伪元素本质上是创建了一个有内容的虚拟容器;
  • CSS3 中伪类和伪元素的语法不同;
  • 在 CSS3 中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示;
  • 可以同时使用多个伪类,而只能同时使用一个伪元素。

总的来说,伪类选择器关注的是元素在特定状态下的样式变化,而伪元素选择器则是通过创建新的元素来实现特定的样式效果。两者都是CSS中非常强大的工具,可以帮助开发者实现复杂的页面布局和动态效果。

伪类选择器和伪元素选择器虽然不是真正的元素,但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们,可以让你的网页更加生动、互动性更强,同时也能更好地控制页面的布局和内容的表现。

动图封面

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

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

相关文章

Java SpringBoot构建传统文化网,三步实现信息展示,传承文化精髓

✍✍计算机毕业编程指导师** ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java…

大道至简,大厂官网基本都走简洁化设计路线。

「大道至简」是一种设计理念&#xff0c;强调设计应该追求简洁、直观、易用&#xff0c;而不是过多的修饰和繁琐的细节。 对于大厂的官网来说&#xff0c;简洁化设计路线的选择可能有以下几个原因&#xff1a; 1. 更好的用户体验&#xff1a; 简洁的设计可以让用户更容易地理…

磁盘调度管理中移臂调度和旋转调度

在磁盘调度管理中&#xff0c;移臂调度和旋转调度是两种不同的优化调度方法&#xff0c;用来提高磁盘读写效率。我们可以通过以下两种方式来理解它们&#xff1a; 1. 移臂调度&#xff08;Seek Scheduling&#xff09; 移臂调度是指磁盘驱动器的磁头在不同的柱面&#xff08;…

NTFS硬盘支持工具Paragon NTFS for Mac 15.4.44 中文破解版

Paragon NTFS for Mac 15.4.44 中文破解版是一个底层的文件系统驱动程序,专门开发用来弥合Windows和Mac OS X之间的不兼容性&#xff0c;通过在Mac OS X系统下提供对任何版本的NTFS文件系统完全的读写访问服务来弥合这种不兼容性。为您轻松解决Mac不能识别Windows NTFS文件难题…

华为鸿蒙系统和安卓的区别

华为鸿蒙系统和安卓系统在多个方面存在显著差异&#xff0c;以下是对两者区别的详细分析&#xff1a; 一、开发商与背景 鸿蒙系统&#xff1a;由中国的华为公司主导开发&#xff0c;旨在创造一个超级虚拟终端互联的世界&#xff0c;将人、设备、场景有机地联系在一起。自2012…

【深度学习】线性回归的从零开始实现与简洁实现

前言 我原本后面打算用李沐老师那本《动手学深度学习》继续“抄书”&#xff0c;他们团队也免费提供了电子版(https://zh-v2.d2l.ai/d2l-zh-pytorch.pdf)。但书里涉及到代码&#xff0c;一方面展示起来不太方便&#xff0c;另一方面我自己也有很多地方看不太懂。 这让我开始思…

Pepper佩盼尔wordpress模板

Pepper佩盼尔WordPress模板是一款专为追求简洁、现代和专业外观的网站设计者和开发者打造的高品质主题。它以简站为主题&#xff0c;强调“让建网站更简单”的理念&#xff0c;旨在为用户提供一个易于使用、功能丰富的平台来构建他们的在线业务或个人网站。 模板特点包括&…

手机玩黑神话悟空二周目 GameViewer远程助你手机畅玩黑神话悟空 解锁全成就全收集

用手机摸鱼完成黑神话悟空二周目全收集、成就全解锁&#xff0c;实现随时随地玩黑神话悟空&#xff0c;你可以用网易GameViewer远程。 这款远程控制软件专为游戏玩家打造&#xff0c;不管你是上班族&#xff0c;还是学生党&#xff0c;都可以用它在手机、平板上玩黑神话悟空&am…

Vue输入框模糊搜索的多种写法

&#xff08;1&#xff09;模板方案 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</…

音频如何低延时回声消除与降噪篇保姆级教程

目录 1 回声消除技术 1.1 回声产生的原因 1.2 传统回声消除方法 1.3 先进的回声消除算法 2 降噪技术 2.1 降噪技术的原理与方法 2.2 传统降噪方法 2.3 先进的降噪算法 3 低延时处理技术 3.1 低延时处理的重要性 3.2 低延时回声消除技术 3.3 低延时降噪技术 4 调试…

Netty系列-2 NioServerSocketChannel和NioSocketChannel介绍

背景 本文介绍Netty的通道组件NioServerSocketChannel和NioSocketChannel&#xff0c;从源码的角度介绍其实现原理。 1.NioServerSocketChannel Netty本质是对NIO的封装和增强&#xff0c;因此Netty框架中必然包含了对于ServerSocketChannel的构建、配置以及向选择器注册&am…

谈一谈JVM的GC(垃圾回收)

JVM&#xff08;Java Virtual Machine&#xff09;的GC&#xff08;Garbage Collection&#xff0c;垃圾回收&#xff09;是Java语言的一个重要特性&#xff0c;它负责自动管理内存&#xff0c;释放那些不再被使用的对象所占用的内存空间。以下是对JVM GC的详细介绍&#xff1a…

Python 全栈系列266 Kafka服务的Docker搭建

说明 在大量数据处理任务下的缓存与分发 这个算是来自顾同学的助攻1&#xff0c;我有点java绝缘体的体质&#xff0c;碰到和java相关的安装部署总会碰到点奇怪的问题&#xff0c;不过现在已经搞定了。测试也接近了kafka官方标称的性能。考虑到网络、消息的大小等因素&#xff0…

风机设计基础

目录 1、风机分类按气体出口压力&#xff08;或升压&#xff09;来进行风机分类按风机全压来进行分类 2、风机定律及效率、功率、压力计算风机轴功率与扭矩关系&#xff1a;风机全压、静压效率计算公式&#xff1a;全压、动压、静压计算公式&#xff1a; 3、风机噪声1、离散噪声…

修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)

最开始把联想浏览器切到EDGE就是用的修改系统的默认浏览器。不知怎么的现在搜到的方法都是在说修改配置文件&#x1f613;。 不想动配置文件&#xff0c;平时对默认浏览器没有特殊要求的&#xff0c;可以用这个方法。 这里是把默认浏览器改成联想浏览器&#xff0c;电脑也是联…

macos 系统 降级, 重装, 升级图文教程

最近一不小心mac被升级到了最新版本, 在使用vscode的时候经常卡顿,于是有了降级macos的想法! 于是就有了这macos的系统降级 , 重装, 升级图文教程. 本文重点介绍macos降级, 重装过程, 至于升级, 这个一不小心就会被升级(通过应用商店)基本上都是自动升级的,所以不做更多说明. …

低代码平台赋能:烟花鞭炮企业数字化转型新篇章

随着数字化转型的浪潮席卷全球&#xff0c;传统制造业正面临着前所未有的变革机遇。烟花鞭炮行业&#xff0c;作为承载深厚文化底蕴与独特工艺的传统产业&#xff0c;也不例外。近年来&#xff0c;我国政府高度重视中小企业数字化转型&#xff0c;出台了一系列扶持政策&#xf…

基于大数据的电商平台电脑销售数据分析系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 随着电子商务的蓬勃发展&#xff0c;各大电商平台积累了海量的商品数据。如何从这些数据中提取有价值的信息&#xff0c;对于商家来说至关重要。本项目利用网络爬虫技术从京东电商平台采集各类品牌…

春秋云镜(OpenSSH)·CVE-2023-51385

靶标介绍&#xff1a; OpenSSH 是使用 SSH 协议进行远程登录的连接工具。在OpenSSH 9.6版本之前的ssh中&#xff0c;如果用户名或主机名中含有shell元字符&#xff08;如 | "等&#xff09;&#xff0c;并且ssh_config中ProxyCommand、LocalCommand指令或"match exe…

Mybatis 基础知识

目录 一、简介 1、JDK&#xff1a; 2、JRE&#xff1a; 3、JVM&#xff1a; 4、Java SE&#xff1a; 5、Java EE&#xff1a; 6、持久层&#xff1a; 7、轻量级&#xff1a; 8、半自动化&#xff1a; 9、ORM&#xff1a; 10、框架&#xff1a; 二、三层架构 1、业…