CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)

        前言:我们已经知道了在CSS中,选择器有基本选择器、复合选择器、伪类选择器、那么选择器学习完了吗?显然是没有的,这篇文章讲解最后一种选择器——伪元素选择器。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

那么废话不多说,先让我们看一下这篇文章讲解的内容:

目录

伪元素选择器

        (1)初始伪元素选择器

        (2)伪元素的语法规范

        (3)各个伪元素选择器

        【1】first-letter

        【2】first-line

        【3】selection

        【4】placeholder

        【5】before + after


伪元素选择器

        (1)初始伪元素选择器

        在学习特定的伪元素选择器之前,让我们先来学习一下什么是伪元素选择器:

伪元素选择器是用来选择html标签种的特定部分,而不是整个标签里面的内容。它通常用于处理那些不是由HTML标签直接表示的内容,比如首行文字、首字母或者生成的内容等等。

总结:伪元素选择器就是对基本选择器或复合选择器的修饰,是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

        (2)伪元素的语法规范

语法规范:

/* 在选择器之后加上:: */
selector::pseudo-element {/* 添加的样式 */property: value;
}

我们使用一个下面要学习的伪元素选择器来举一下例:(只需要看伪元素选择器的组成形式即可)

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body><!-- 将第一个字母的大小改为30px,并且颜色位橙色 --><div>hello the world !</div>
</body>
</html>

CSS代码:

div::first-letter {font-size: 30px;color: orange;
}

从上边的代码中,我们可以更好的对伪元素选择器的语法规范进行理解。

注意:

        一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的基础选择器/复合选择器之后。

备注:

按照规范,应该使用双冒号(::)而不是单个冒号(:),以便区分伪类和伪元素。但是,由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

这样我们就了解了伪元素选择器的语法规范了,接下来开始学习各个伪元素选择器。

先让我们看一下常见的伪元素选择器有哪些:

        (3)各个伪元素选择器

        【1】first-letter

first-letter的作用:: :first-letter会选中某(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body><!-- 将第一个字母的大小改为30px,并且颜色位橙色 --><div>hello the world !</div>
</body>
</html>

CSS代码:

div::first-letter {font-size: 30px;color: orange;
}

这就是之前我们学习伪元素选择器语法的时候使用的案例,现在我们再来看一下,我们使用first-letter伪元素选择器将首字母变为了大小30px,颜色为橙色。

        【2】first-line

first-line的作用:在某(块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body><!-- 将第一个行的大小改为20px,并且颜色位红色 --><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt facilis velit ipsa itaque aut cupiditate incidunt eum suscipit, nulla adipisci?</div>
</body>
</html>

CSS代码:

div::first-line {font-size: 20px;color: red;
}

我们可以看到first-line伪元素选择器将第一行的字体大小变为了20px,颜色变为了红色。

        【3】selection

selection的作用:selection伪元素选择器应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body><!-- 一段文字 --><div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste earum delectus laudantium commodi dolore odio quo voluptatum quae. Ipsam et ullam possimus delectus corporis eos, maiores libero distinctio eum laboriosam rerum, odio aliquam, minus repellat dolorum. Quaerat dolore corrupti ratione?</div>
</body>
</html>

CSS代码:

/* 选中的文字颜色会变为红色,背景色为天蓝色 */
div::selection {color: red;background-color: skyblue;
}

这样我们就学会了selection伪元素选择器的使用了。

        【4】placeholder

placeholder的作用:::placeholder作用于<input>或<textarea>元素中的占位文本。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>用户名:<input type="text" placeholder="请输入用户名"><br>密码:<input type="password" placeholder="请输入密码">
</body>
</html>

CSS代码:

/* 文本字体为橙色,切背景为天蓝色 */
input::placeholder {color: orange;background-color: skyblue;
}

这样我们就了解了placeholder伪元素选择器的使用。

        【5】before + after

before / after的作用:before / after伪元素选择器会创建一个伪元素,其将成为匹配选中的元素的第一个 / 最后一个子元素,常通过 content属性来为一个元素添加修饰性的内容。

让我们直接使用案例来看一下:(我们使用before来做演示,after类似,只是位置不同

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.16.css">
</head>
<body><div>199</div><div>299</div><div>399</div><div>499</div>
</body>
</html>

CSS代码:

/* 在div的内容之前加上$符号 */
div::before {content: "$";
}

这样我们就学会了before伪元素选择器的使用,当然after与其类型,只不过位置为结尾。


以上就是本篇文章的所有内容了~~~

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

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

相关文章

【linux】mobaterm如何kill pycharm进程

【linux】mobaterm如何kill pycharm进程 【先赞后看养成习惯】求点赞关注收藏&#x1f600; 使用云服务器时&#xff0c;pycharm在打开状态下&#xff0c;不小心关了mobaxterm&#xff0c;然后再输入pycharm.sh就会打不开pycharm&#xff0c;显示已经打开报错&#xff1a;Com…

软考131-上午题-【软件工程】-软件可靠性、可用性、可维护性

可靠性、可用性和可维护性是软件的质量属性&#xff0c;软件工程中&#xff0c;用 0-1 之间的数来度量。 0.66 66% 1、 可靠性 可靠性是指一个系统对于给定的时间间隔内、在给定条件下无失效运作的概率。 可以用 MTTF/ (1MTTF) 来度量&#xff0c;其中 MTTF 为平均无故障时间…

Java单源最短路径知识点(含面试大厂题和源码)

单源最短路径问题是指在加权图中&#xff0c;找到从单个源点到其他所有点的最短路径的问题。这是图论和网络优化中的一个经典问题&#xff0c;具有广泛的应用&#xff0c;如网络路由、交通规划、社交网络分析等。解决单源最短路径问题的算法有很多&#xff0c;其中最著名的包括…

PHP一句话木马

一句话木马 PHP 的一句话木马是一种用于 Web 应用程序漏洞利用的代码片段。它通常是一小段 PHP 代码&#xff0c;能够在目标服务器上执行任意命令。一句话木马的工作原理是利用 Web 应用程序中的安全漏洞&#xff0c;将恶意代码注入到服务器端的 PHP 脚本中。一旦执行&#xf…

Java 分页查询

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

Docker Container (容器) 常见命令

Docker 容器的生命周期 什么是容器&#xff1f; 通俗地讲&#xff0c;容器是镜像的运行实体。镜像是静态的只读文件&#xff0c;而容器带有运行时需要的可写文件层&#xff0c;并且容器中的进程属于运行状态。即容器运行着真正的应用进程。容 器有初建、运行、停止、暂停和删除…

OpenXR API概览与核心组件解析

在虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;领域&#xff0c;OpenXR API提供了一个重要的开放标准&#xff0c;使得开发者能够跨多种硬件和软件平台创建兼容的应用。本文将详细解释OpenXR中的核心组件和数据结构&#xff0c;并探讨它们如何共同…

智能商品计划系统如何提升鞋服零售品牌的竞争力

国内鞋服零售企业经过多年的发展&#xff0c;已经形成了众多知名品牌&#xff0c;然而近年来一些企业频频受到库存问题的困扰&#xff0c;这一问题不仅影响了品牌商自身&#xff0c;也给长期合作的经销商带来了困扰。订货会制度在初期曾经有效地解决了盲目生产的问题&#xff0…

蓝桥杯刷题-计算系数

本文自用&#xff0c;用作记录。 211. 计算系数 - AcWing题库 #include <bits/stdc.h>using namespace std;int a, b, k ,n ,m; const int mod 10007; int qmi(int a, int k) {a % mod;int res 1;while (k){if (k & 1) res res * a % mod;a a * a % mod;k >…

机器学习方法在测井解释上的应用-以岩性分类为例

机器学习在测井解释上的应用越来越广泛&#xff0c;主要用于提高油气勘探和开发的效率和精度。通过使用机器学习算法&#xff0c;可以从测井数据中自动识别地质特征&#xff0c;预测岩石物理性质&#xff0c;以及优化油气储层的评估和管理。 以下是机器学习在测井解释中的一些…

OpenHarmony南向开发实例:【游戏手柄】

介绍 基于TS扩展的声明式开发范式编程语言&#xff0c;以及OpenHarmony的分布式能力实现的一个手柄游戏。 完成本篇Codelab需要两台开发板&#xff0c;一台开发板作为游戏端&#xff0c;一台开发板作为手柄端&#xff0c;实现如下功能&#xff1a; 游戏端呈现飞机移动、发射…

Windows 安装 Node.js 开发环境

一、简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;主要功能是编写像 web 服务器一样的网络应用。它使用事件驱动、非阻塞式 I/O 模型&#xff0c;可以优化应用程序的传输量和规模&#xff0c;非常适合在分布式设备上运行数据密集型的实时应用。 …

【C++】适配器· 优先级队列 仿函数 反向迭代器

目录 适配器&#xff1a;适配器的应用&#xff1a;1. 优先级队列&#xff1a;仿函数&#xff1a;更深入的了解仿函数&#xff1a;一个关于不容易被注意的知识点&#xff1a; 2. 反向迭代器&#xff1a;&#xff08;list为例&#xff09; 适配器&#xff1a; 我们先来谈来一下容…

【网络编程】如何创建一个自己的并发服务器?

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的网络编程系列之如何创建一个自己的并发服务器&#xff0c;在这篇文章中&#xff0c;你将会学习到在Linux内核中如何创建一个自己的并发服务器&#xff0c;并且我会给出源码进行剖析&#xff0c;以及手绘UML图来帮助大家…

素描石膏像:写实与抽象的美学对话

正文&#xff1a; 素描&#xff0c;作为绘画艺术的基础&#xff0c;承载着艺术家对世界的独特理解和表达。在素描石膏像的创作中&#xff0c;写实与抽象两种风格的碰撞&#xff0c;不仅展现了艺术家的技巧&#xff0c;更是一场美学的对话。 一、写实风格&#xff1a;细节的捕…

基于HMM隐马尔可夫模型的金融数据预测算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于HMM隐马尔可夫模型的金融数据预测算法.程序实现HMM模型的训练&#xff0c;使用训练后的模型进行预测。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运…

CentOS 7 文件权限管理详解

CentOS 7 文件权限管理详解 在 CentOS 7 系统中,文件权限管理是一项至关重要的任务,它确保了系统安全、数据完整性和用户隐私。本文将详细介绍 CentOS 7 中的文件权限管理,包括相关文件和命令的使用。 一、文件权限基础 在 Linux 系统中,每个文件和目录都有与之关联的权…

简单工厂模式抽象工厂模式

一.简单工厂模式 1.什么是工厂模式 工厂模式的核心就是把对象的生产过程交给工厂来完成&#xff0c;当外部需要一个对象时&#xff0c;由工厂提供接口来获取对象&#xff0c;这样一来即使生产对象的过程变了&#xff0c;仍然不影响外部对对象的获取和使用。 2.举个栗子 定义…

云计算笔记

RAID的组合方式 RAID0&#xff1a;多个硬盘同时工作&#xff0c;可提供性能&#xff0c;无冗余机制 RAID1&#xff1a;数据保存多份&#xff0c;提供冗余机制&#xff0c;性能受到影响 RAID3&#xff1a;存在数据盘和单独校验盘&#xff0c;数据写入 至数据盘后需要运算且将…

吃透2000-2024年600道真题和解析,科学高效通过2025年AMC8竞赛

为帮助孩子科学、有效备考AMC8竞赛&#xff0c;我整理了2000-2004年的全部AMC8真题&#xff08;完整版共600道&#xff0c;且修正了官方发布的原试卷中的少量bug&#xff09;&#xff0c;并且独家制作成多种在线练习&#xff0c;利用碎片化时间&#xff0c;8个多月的时间足以通…