CSS复合选择器(三)

伪元素选择器

  • 作用:选中元素中的一些特殊位置。
  • 常用伪元素:
  1. ::first-letter 选中元素中的第一个文字。
  2. ::first-line 选中元素中的第一行文字。
  3. ::selection选中被鼠标选中的内容。
  4. ::placeholder 选中输入框的提示文字。
  5. ::before 在元素最开始的位置,创建一个子元素(必须用content 属性指定内容)。
  6. ::after 在元素最后的位置,创建一个子元素(必须用content 属性指定内容)。

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪元素选择器</title><style>/* 什么是伪元素? —— 很像元素,但不是元素(element),是元素中的一些特殊位置 *//* 选中的是div中的第一个文字 */div::first-letter {color: red;font-size: 40px;}/* 选中的是div中的第一行文字 */div::first-line {background-color: yellow;}/* 选中的是div中被鼠标选择的文字 */div::selection {background-color: green;color: orange;}/* 选中的是input元素中的提示文字 */input::placeholder {color: skyblue;}/* 选中的是p元素最开始的位置,随后创建一个子元素 */p::before {content:"¥";color: red;font-size: 20px;}/* 选中的是p元素最后的位置,随后创建一个子元素 */p::after {content:".00";color: blue;font-size: 12px;}</style>
</head>
<body><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div><br><input type="text" placeholder="请输入您的用户名"><p>199</p><p>299</p><p>399</p><p>499</p>
</body>
</html>

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

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

相关文章

1.BOM-获取元素(获取元素、修改属性)

web Api基本认知 作用&#xff1a;通过JS去操作html页面和浏览器(实现浏览器中的某些功能) 分类&#xff1a; DOM(网页)&#xff1a;Document Object Model(文档对象模型) BOM(浏览器)&#xff1a;Borwser Object Model(浏览器对象模型) DOM DOM树 将网页中标签的关系以树状…

利用excel批量修改图片文件名

今天同事提出需求要实现利用excel批量修改某文件夹下的图片重命名&#xff0c;衡量到各种条件&#xff0c;最后还是选择了vbs来实现。代码如下 代码 创建Excel对象 Set objExcel CreateObject("Excel.Application") objExcel.Visible False 隐藏Excel窗口 打开Ex…

react:usecontext使用

useContext返回 调用组件上方最近的 SomeContext.Provider 的 value 如果没有这样的 provider 传递给 createContext 的 defaultValue。返回的值始终是最新的。 如果 context 发生变化&#xff0c;React 会自动重新渲染读取 context 的组件。 <Context.Provider> 需要位于…

【MySQL知识体系】第2章 数据库与表的创建(一)

第2章 数据库与表的创建 2.1 数据库操作 2.2 表操作 文章目录 第2章 数据库与表的创建2.1 数据库操作2.1.1 创建第一个数据库2.1.2 更新数据库名称&#xff08;数据库创建后无法修改名称&#xff09;2.1.3 删除数据库2.1.4 取个合适的数据库名称 第2章 数据库与表的创建 2.1 数…

990-40产品经理:What Is Effective Written Communication? 什么是有效的书面沟通?

The purpose of written communication is to capture your reader’s attention and get your point across clearly. Ultimately, when you communicate in writing, you are helping the reader understand your perspective看法 on a topic. There are certain qualities a…

在 echarts 的 rich 中使用 iconfont 图标库图标作为 backgroundColor.image 值的方法

实现步骤 1、引入 iconfont.js。该脚本执行时&#xff0c;会在 body 下插入一个 svg 标签&#xff0c;标签下包含了图标库中的 svg 图标 path。 <script src"your/iconfont/path/iconfont.js"></script>或者 import your/iconfont/path/iconfont.js2、…

【学习心得】websocket协议简介并与http协议对比

一、轮询和长轮询 在websocket协议出现之前&#xff0c;要想实现服务器和客户端的双向持久通信采取的是Ajax轮询。它的原理是每隔一段时间客户端就给服务器发送请求找服务器要数据。 让我们通过一个生活化的比喻来解释轮询和长轮询假设你正在与一位不怎么主动说话的老大爷&…

基于R语言lavaan的SEM在复杂统计建模中的科研技术新突破

此外&#xff0c;我们还将深入探讨R语言的基础知识、结构方程模型的基本原理、lavaan程序包的使用方法等内容。无论是潜变量分析、复合变量分析&#xff0c;还是非线性/非正态/缺失数据处理、分类变量分析、分组数据处理等复杂问题&#xff0c;我们都将一一为您解析。 希望通过…

3.7作业

网络聊天室&#xff1a; 程序代码&#xff1a; ser.c #include <myhead.h> //定义消息类型结构体 struct xiaoxi {char type;char name[20];char text[100]; };int main(int argc, const char* argv[]) {// 创建套接字int sfd socket(AF_INET, SOCK_STREAM, 0);if (s…

Spring源码:手写AOP

文章目录 一、概念1、AOP是什么&#xff1f;2、相关概念1&#xff09;目标对象Target2&#xff09;通知Advice3&#xff09;连接点Joinpoint4&#xff09;切点Pointcut5&#xff09;切面Aspect6&#xff09;织入Weaving 二、分析三、实现1、实现Advice1&#xff09;前置通知2&a…

蓝桥杯-Stack

Stack实例化步骤 1导包&#xff0c;导入java.util.* 2实例化对象&#xff0c;格式如下 Stack<引用数据类型> stacknew Stack<>(); Stack特点&#xff1a;先进后出。比如1&#xff0c;2&#xff0c;3依次入栈&#xff0c;出栈顺序就是3&#xff0c;2&#xff0c…

企业微信HOOK协议,新设备二次验证处理

提示设备强制二次验证问题已处理 HOOK&#xff1a;https://www.showdoc.com.cn/1663062930779972/7859611259700402密码&#xff1a;999999999

大数据冷热分离方案

数据冷热分离方案 1、背景 ​ 随着业务的发展&#xff0c;在线表中的数据会逐渐增加。常规业务都有冷热数据现象明显的特性&#xff08;需要访问的都是近期产生的热数据&#xff1b;时间久远的冷数据出于备份、备案溯源等诉求会进行在线保留&#xff09;。在业务表数据 量可控…

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

上期解析了下adb端口备份分区的有关操作 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 在以往的博文中对于高通芯片机型的分区读写已经分享了很多。相关类似博文 安卓备份分区----手动查询安卓系统分区信息 导出系统分区的一些基本操作 …

设计模式之构建者模式

构建者模式&#xff08;Builder&#xff09; 定义 将一个复杂对象的构建与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示 使用场景 主要角色 产品 Product建造者接口 Builder具体的建造者 Concrete Builder指挥者 Director:组织构建过程 示例代码 Data p…

0x04_数组_指针_字符串

数组 数组的定义与使用 数组是具有一定顺序关系的若干相同类型变量的集合体&#xff0c;组成数组的变量称为该数组的元素。 给出下面程序的输出&#xff1a; #include <iostream> using namespace std; int main() {int a[10], b[10];for(int i 0; i < 10; i) {a[…

Redis高可用方案

Redis的高可用架构模式及相关配置命令是构建稳定、可靠Redis环境的关键。以下是一些主要的Redis高可用架构模式及其配置方法&#xff1a; 主从复制&#xff08;Master-Slave&#xff09; 主从复制模式实现了Redis数据的备份和读取操作的负载均衡。在这个模式中&#xff0c;一台…

python 基础知识点(蓝桥杯python科目个人复习计划59)

今日复习内容&#xff1a;做题 例题1&#xff1a;建造房屋 问题描述&#xff1a; 小蓝和小桥是两位年轻的建筑师&#xff0c;他们正在设计一座新的城市。 在这个城市中&#xff0c;有N条街道&#xff0c;每条街道上有M个位置可以建造房屋&#xff08;一个位置只能建造一个房…

迷宫641更优解——蓝桥杯2017

1.优解思路&#xff1a; 秒啊&#xff1a;如果这条路可以走通&#xff0c;则这条路上所有点都可以走通&#xff0c;反之若不可以&#xff0c;则都不可以。 因为比如一个点走了&#xff0c;没走通&#xff0c;这条路上的点都出不去&#xff0c;假如有别的点走路走到这条死路上…

2024.3.7 FreeRTOS 作业

思维导图 练习题 1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 //打开定时器3的通道3&#xff0c;并且设置为PWM功能HAL_TIM_PWM_Start(&htim3, TIM_CHANNEL_3);/* USER CODE END 2 *//* Infinite loop *//* USER CODE BEGIN WHILE */while (1…