CSS伪元素详解以及伪元素与伪类的区别

伪元素常常被误解为伪类,主要在于他们的语法相似,都是对于选择器功能的扩展,相似程度很高导致被混淆。
本文通过详细介绍伪元素和常见的使用方法,最后也会分析下伪元素与伪类的基本区别。

基本描述

CSS伪元素也是应用于选择器的关键字,允许改变被选择元素的特定部分的样式。
一般常见的如用于在元素的内容前后插入新的内容,或者改变首字母、首行的样式等。

语法:selector:pseudo-element { property: value; }

div::before {content: '开始-';color: red;font-size: 15px;
}

如上代码,即是我们常用的 ::after 伪元素,在div内部增加一块 开始- 的内容作为div的第一个子元素,可以设置不同的样式属性。

常用伪元素

下面的列表,列出当前可用的伪元素:

伪元素描述
::after作为选中元素的第一个子元素。
::before作为选中元素的最后一个子元素。
::first-letter选中块元素第一行的第一个字母,应用样式。
::first-line选中块元素的第一行,应用样式。
::selection应用于文档中被用户选中的部分,如使用鼠标选中文本。
::file-selector-button代表input(file)标签按钮,用来改变该按钮样式。
::marker应用于list-item元素上的标记点的样式。
::slotted用于选定那些被放在HTML模板中的元素。
::part应用于Web components中shadow-dom的任何匹配part属性的元素。

其中,::before 和 ::after 应该是我们使用最多的伪元素,而其他的伪元素也有各自的特点和作用,下面通过一个示例来展示其中几个伪元素。

示例:

<div class="province"><span>中国中部的省份</span><ul><li>湖北</li><li>湖南</li></ul><input type="file" />
</div>
.province::first-letter {color: #f00;font-size: 20px;
}
.province::before {content: '选择'
}
::selection {background-color: #ff0;
}
li::marker {color: #f00;
}
input::file-selector-button {border: 1px solid #f00;font-size: 20px;border-radius: 5px;
}

页面呈现,如下图:

image

以上代码,使用了多个伪元素的实现:

  • ::before 增加了一个文本内容 选择
  • ::first-letter 改变了第一字的字体大小,颜色变为红色,并且是改变的 ::before 元素的文本,因为 ::before 是第一行子元素的内容。
  • ::file-selector-button 改变了文件上传控件的按钮样式,增加红色边框、圆角、字体大小。
  • ::marker 改变了列表元素,每行前面的圆点为红色(默认是黑色)。
  • ::selection 当鼠标选中内容区域时,背景色会变为黄色。

注意:before伪元素作为第一个子元素,会被first-letter选中赋予样式。
以后当我们想美化文件上传控件时,伪元素 ::file-selector-button 也是一个可用的选择。

::before 和 ::after

这两个伪元素是我们前端开发中最常用的,本节专门详述它们的基本用法。

::before 创建一个伪元素,作为所选中元素的第一个子元素;::after 创建一个伪元素,作为所选中元素的最后一个子元素。
它俩通常展示一块文本内容,并且需要使用 content 属性来为元素添加内容,默认为行内元素。
一般都是用于在元素内部的首尾插入一段内容,文字或者小图标等等。

注意:不能应用于替换元素,如img、br等元素。

content属性

content属性主要用于在 ::before 和 ::after 两个伪元素中插入内容。
它的取值范围:

  • none:无伪元素
  • normal:基本等于none
  • string:字符串文本内容
  • uri:指定外部资源,一般是图片,资源无法显示则被忽略或显示占位符
  • counter:计数器函数
  • attr(X):将元素的X属性以字符串形式返回。
  • open-quote|close-quote:前后引号,如双引号、单引号等。
  • no-open-quote|no-close-quote:不产生内容

示例

<div class="wrap"><label>请选择您所在的城市</label>
</div>
.wrap::before {content: '开始-';color: #f00;
}
.wrap::after {content: url(./home.png);
}
label::before{content: open-quote;color: #f00;
}
label::after{content: close-quote;color: #f00;
}

页面呈现,如下图:

image

以上代码,
在 div.wrap 前面添加文本内容,红色的文字 开始-
在 div.wrap 后面添加图片资源,home.png;
通过给 label 元素前后添加 open-quote 和 close-quote 的属性值,增加了双引号,并且能设置样式属性为红色。

伪元素的呈现

另外,我们需要了解到,伪元素之所以加个伪字,在于它虽然创建了新的元素作为某个选中元素的子元素,但它并不存在于DOM文档树中,而仅仅只是一种逻辑上的虚拟呈现。
不过,在当前浏览器的开发者工具中可以查看到部分伪元素,这可以方便我们进行调试。

image

如上图,左边dom文档结构中并没有伪元素,右边在浏览器的开发者工具里能看到 ::before::after 和 ::marker 三个伪元素。

伪元素与伪类的区别

伪元素与伪类由于在写法上比较类似,所以常常被混淆,多见于把伪元素说成是伪类。
虽然并没有啥大的影响,但我们也有必要了解下它们的区别:

  • 伪类根据状态改变元素样式,只是对选择器的扩展和弥补不足;而伪元素则是在逻辑上创建了虚拟的新元素,并可以给新元素添加样式。
  • 伪类使用单冒号,CSS3在伪元素中引入双冒号,是为了区分伪类和伪元素,伪元素同时也支持单冒号。为了方便区分,可以给伪元素一直使用双冒号。
  • 一个选择器中可以同时跟随多个伪类并一起起作用,但伪元素如果在选择器后跟随多个则不会起作用。
/*对第一个div元素应用hover状态的样式*/
div:first-child:hover {color: #ddd;
}/*无效,没有伪元素会产生*/
.province::before::first-letter {content: '选择';color: #f00;font-size: 20px;
}

以上代码,当使用多个伪元素时,代码将失效,不会创建新元素,样式也不起作用。 

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

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

相关文章

结构型-代理模式(Proxy Pattern)

概述 代理模式是一种结构型设计模式&#xff0c;它使得代理对象可以控制对实际对象的访问。在代理模式中&#xff0c;代理对象通过持有对实际对象的引用&#xff0c;来代替实际对象进行操作。 代理对象对客户端隐藏了实际对象的细节&#xff0c;并可以在调用实际对象之前或之…

【ARM 常见汇编指令学习 4 -- ARM64 比较指令 cbnz 与 b.ne 区别】

文章目录 B.NE 指令格式CBNZ 指令格式 上篇文章&#xff1a;ARM 常见汇编指令学习 3 – ARM64 无符号位域提取指令 UBFX 下篇文章&#xff1a;ARM 常见汇编指令学习 5 – arm64汇编指令 wzr 和 xzr B.NE 指令格式 B.NE <label>B.NE指令的含义是&#xff1a;如果上一个指…

无线温湿度信息收集点模块的组成和工作状态及编程与组网建议

在传感技术与物联网的不断发展下&#xff0c;无线温湿度信息收集点模块作为一种重要的终端设备&#xff0c;被广泛应用于各个领域。本文将详细介绍该模块的组成和工作状态&#xff0c;并给出编程和组网的建议。 一、组成 该无线温湿度信息收集点模块由以下几个核心组成部分构成…

自然语言处理从入门到应用——LangChain:模型(Models)-[文本嵌入模型Ⅰ]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 本文将介绍如何在LangChain中使用Embedding类。Embedding类是一种与嵌入交互的类。有很多嵌入提供商&#xff0c;如&#xff1a;OpenAI、Cohere、Hugging Face等&#xff0c;这个类旨在为所有这些提供一个标准接口。 …

安卓:百度地图开发(超详细)

一、百度地图介绍 百度地图SDK是一套供开发者使用的软件开发工具包&#xff08;SDK&#xff09;&#xff0c;用于在Android应用程序中集成和使用百度地图功能。通过使用百度地图SDK&#xff0c;开发者可以实现在自己的应用中显示地图、获取定位信息、进行搜索、导航等功能。 百…

算法----二叉搜索树中第K小的元素

题目 二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#xff…

docker swarm查看日志汇总

目录 从头显示所有日志并持续输出 显示末尾最后5行并持续输出 查看最近五分钟内的日志 查看指定时间之后的日志并持续输出 从头显示所有日志并持续输出 docker service logs -f xx 显示末尾最后5行并持续输出 docker service logs -f -n 5 xx或docker service logs -f…

STL中的神秘“指针”:迭代器

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a;C学习 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对我最大…

NAT协议(网络地址转换协议)详解

NAT协议&#xff08;网络地址转换协议&#xff09;详解 为什么需要NATNAT的实现方式静态NAT动态NATNAPT NAT技术的优缺点优点缺点 NAT协议是将IP数据报头中的IP地址转换为另外一个IP地址的过程&#xff0c;主要用于实现私有网络访问公有网络的功能。这种通过使用少量的IP地址代…

2023-7-26-第二十三式解释器模式

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…

[vue] 新项目配置整理(没写完,回头有空继续)

省流版(vue2项目)&#xff1a; 脚手架&#xff1a;vue create xxxx vuex&#xff1a;npm i vuex3 router : npm install vue-router3 vue cli创建项目 vue create xxxx(项目名称) 添加基本配置 module.exports {lintOnSave: false, // 关闭eslint检查publicPath:./, //…

Longhorn vs Rook vs OpenEBS vs Portworx vs IOMesh:细说 5 款 K8s 持久化存储产品优劣势

云原生时代下&#xff0c;越来越多的企业开始使用 Kubernetes&#xff08;K8s&#xff09;承载数据库、消息中间件等“生产级”有状态工作负载。由于这些应用对数据持久保存、性能、容量扩展和快速交付具有较高的要求&#xff0c;企业往往需要采用专为 Kubernetes 环境设计的持…

【异常错误】deepspeed:Cannot specify num_nodes/gpus with include/exclude(deepspeed配置GPU id)

今天在使用deepspeed进行训练的时候&#xff0c;本来想使用GPU 4,5,6,7&#xff0c;但是设置了如下命令还是不管用&#xff1a; export CUDA_VISIBLE_DEVICES4,5,6,7 最后在deepspeed的配置文件中进行配置&#xff0c;才得以解决&#xff0c;期间遇到错误&#xff1a; [2023-0…

ViT-vision transformer

ViT-vision transformer 介绍 Transformer最早是在NLP领域提出的&#xff0c;受此启发&#xff0c;Google将其用于图像&#xff0c;并对分类流程作尽量少的修改。 起源&#xff1a;从机器翻译的角度来看&#xff0c;一个句子想要翻译好&#xff0c;必须考虑上下文的信息&…

使用easyui的tree组件实现给角色快捷分配权限功能

这篇文章主要介绍怎么实现角色权限的快捷分配功能&#xff0c;不需要像大多数项目的授权一样&#xff0c;使用类似穿梭框的组件来授权。 具体实现&#xff1a;通过菜单树的勾选和取消勾选来给角色分配权限&#xff0c;在这之前&#xff0c;需要得到角色的菜单树&#xff0c;角色…

笔记整理-SpringBoot中的扩展点

SpringBoot有哪些扩展点 aware 感知类接口 aware系列的扩展接口&#xff0c;允许spring应用感知/获取特定的上下文环境或对象。bean生命周期控制类接口 bean生命周期类的接口&#xff0c;可以控制spring容器对bean的处理。app生命周期控制类接口 app生命周期控制类接口&#xf…

【Lua学习笔记】Lua进阶——Table,迭代器

文章目录 官方唯一指定数据结构--tabletable的一万种用法字典和数组 迭代器ipairs()pairs() 回到Table 在【Lua学习笔记】Lua入门中我们讲到了Lua的一些入门知识点&#xff0c;本文将补充Lua的一些进阶知识 官方唯一指定数据结构–table 在上篇文章的最后&#xff0c;我们指出…

第九十四回 如何打造一个网络框架

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了"如何mock数据"相关的内容&#xff0c;本章回中将介绍如 何打造一个网络框架闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 最近在项目中使用dio处理网络相关的内容&#xff0c;有些地方的代…

Mybatis使用collection映射一对多查询分页问题

场景&#xff1a;页面展示列表&#xff0c;需要查询多的字段&#xff0c;和一的字段。并且还要分页。 这时候直接想到的是手写sql。 /*** 标签*/private List<BasicResidentTags> tags;Data TableName("basic_resident_tags") public class BasicResidentTag…

SpringCloud微服务实战——搭建企业级开发框架(五十三):微信小程序授权登录增加多租户可配置界面

GitEgg框架集成weixin-java-miniapp工具包以实现微信小程序相关接口调用功能&#xff0c;weixin-java-miniapp底层支持多租户扩展。每个小程序都有唯一的appid&#xff0c;weixin-java-miniapp的多租户实现并不是以租户标识TenantId来区分的&#xff0c;而是在接口调用时&#…