前端学习之css伪元素选择器

news2025/2/25 17:06:27

伪元素选择器

(注释是对各个内容的解释与理解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <!-- 双冒号开头一般都称为伪元素,没有链式写法 -->
    <style>
        /* 在所有li元素后面加一句hello */
        li::after{
            content: "hello";
        }
        /* 在所有li元素前面加一句hello */
        li::before{
            content: "hello";
        }
        /* 当光标移到列表上hello变蓝色的hello */
        li:hover::after{
            content: "66";
            color: blue;
        }
        /* 对文本第一个字母字符字体变大
        对文本第一行内容变红
        对光标选中内容变粉 */
        ol::first-letter{
            font-size: larger;
        }
        ol::first-line{
            color: red;
        }
        li::selection{
            color: pink;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <!--  -->
        <ol>
            <li>张三1</li>
            <li>张三2</li>
            <li>张三3</li>
            <li>张三4</li>
        </ol>
    </div>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

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

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

相关文章

STL容器之list类

文章目录 STL容器之list类1、list的介绍2、list的使用2.1、list的常见构造2.2、list的iterator的使用2.3、list空间增长问题2.4、list的增删查改2.5、list迭代器失效问题 3、list的模拟实现&#xff08;含反向迭代器&#xff09; STL容器之list类 1、list的介绍 list是序列容器…

C++初阶:1_C++入门

C入门 零.本节知识点安排目的 C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式等。熟悉C语言之后&#xff0c;对C学习有一定的帮助&#xff0c;本章节主要目标&#xff1a; 补充C语言语法的不足&#xff0…

【S5PV210_视频编解码项目】裸机开发:实现按键的外部中断处理

加粗样式本文所作内容&#xff1a; 基于S5PV210芯片实现按键的外部中断处理程序&#xff0c;搭建中断处理流程框架 S5PV210对于中断处理的操作流程 1 外部中断得到触发&#xff1a; 1&#xff09;外部中断在初始化阶段得到使能 2&#xff09;外界达到了外部中断的触发条件 …

Spring注解方式整合三层架构

注解方式特点 1. 完全注解方式指的是去掉xml文件&#xff0c;使用配置类 注解实现 2. xml文件替换成使用Configuration注解标记的类 3. 标记IoC注解&#xff1a;Component,Service,Controller,Repository 4. 标记DI注解&#xff1a;Autowired Qualifier Resource Value 5. &…

html--简历

文章目录 html html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"maximum-scale1.0,minimum-scale1.0,user-scalable0,widthdevice-width,initial-scale1.0&qu…

SqlServer2008(R2)(二)SqlServer2008(R2)安装和卸载注意事项整理

二、注意事项 1、 安装数据中心版 说明&#xff1a;此激活版仅用于测试和学习使用。 这是官方的下载页面&#xff08;需要付费订阅&#xff09;&#xff1a; http://msdn.microsoft.com/zh-cn/subscriptions/downloads/default.aspx 数据中心版&#xff1a; PTTFM-X467G-P7RH…

在Windows系统上搭建MongoDB-这篇文章刚刚好

在Windows系统上搭建MongoDB集群 文章目录 1.下载MongoDB2.集群描述3.构建集群文件目录4.新建配置文件5.启动MongoDB服务6.配置集群7.集群测试8.设置密码和开启认证一、安装MongoDB 1.下载MongoDB 去MongoDB官网下载解压版免安装的压缩包。 https://www.mongodb.com/try/do…

金枪鱼群优化算法TSO优化BiLSTM-ATTENTION实现风力发电功率预测(matlab)

金枪鱼群优化算法TSO优化BiLSTM-ATTENTION实现风力发电功率预测&#xff08;matlab&#xff09; TSO-BiLSTM-Attention金枪鱼群算法优化长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 金枪鱼群优化算法&#xff08;Tuna Swarm Optimization&#xff0c;TSO)是一…

一种动态联动的实现方法

安防领域中的联动规则 有安防领域相关的开发经历的人知道&#xff0c;IPCamera可以配置使能“侦测”功能&#xff0c;并且指定仅针对图像传感器的某个区载进行侦测。除了基本的“移动侦测"外&#xff0c;侦测的功能点还有细化的类别&#xff0c;如人员侦测、车辆侦测、烟…

python之前端css样式(一)

css ID选择器 #c1{color:red;#边框为红色border:1px solid red; } <div id"c2">中国移动</div> 类选择器 .xx{color:blue; } <div class"xx">中国联通</div> 标签选择器 li{color: pink; } <ul><li>北京</li…

C++作业day4

成员函数版本实现算术运算符的重载 全局函数版本实现算术运算符的重载 #include <iostream>using namespace std;class Person {friend const Person operator-(const Person &L,const Person &R); private:int a;int b; public:Person() {}Person(int a,int …

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2330)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …

深入浅出ConcurrentHashMap

ConcurrentHashMap 由于HashMap在多线程的环境下有线程安全的问题&#xff0c;并且HashTable的性能低下&#xff0c;所以Java推出了ConcurrentHashMap&#xff0c;因此ConcurrentHashMap可以理解为线程安全并且性能较好的HashMap。 HashTable为什么慢&#xff1f;是因为使用了…

同步和异步程序的关联和区别是?Guide to Synchronous and Asynchronous Code

2024/3/12 发布 正在寻觅一份前端开发工作&#xff0c;如果您觉得这篇文章对你有所帮助&#xff0c;这是我的简历1 在这篇文章中你能学习和理解&#xff1a;NodeJS是如何工作、如何处理所有发送给服务器的函数&#xff08;无论同步或者异步&#xff09;和请求、Event Loops in …

Apache-Doris基础概念

OLAP数据库Doris 一、Doris架构二、基本概念1. Row & Column2. Partition & Tablet3. 建表示例&#xff08;1&#xff09;列的定义&#xff08;2&#xff09;分区分桶&#xff08;3&#xff09;多列分区&#xff08;4&#xff09;PROPERTIES&#xff08;5&#xff09;E…

Java 面试题之框架

1. Spring 是什么 Sping 是包含了众多工具方法的 IOC 容器&#xff0c;IOC是控制反转&#xff0c;说的是对象的创建和销毁的权利都交给 Spring 来管理了, 它本身又具备了存储对象和获取对象的能力. 。 容器&#xff1a;字面意思&#xff0c;用来容纳某种物品的装置。 比如 L…

通俗易懂的Python循环讲解

循环用于重复执行一些程序块。从上一讲的选择结构&#xff0c;我们已经看到了如何用缩进来表示程序块的隶属关系。循环也会用到类似的写法。 for循环 for循环需要预先设定好循环的次数(n)&#xff0c;然后执行隶属于for的语句n次。 基本构造是 for 元素 in 序列: statemen…

RoketMQ主从搭建

vim /etc/hosts# IP与域名映射&#xff0c;端口看自己的#nameserver 192.168.126.132 rocketmq-nameserver1 192.168.126.133 rocketmq-nameserver2# 注意主从节点不在同一个主机上 #broker 192.168.126.132 rocketmq-master1 192.168.126.133 rocketmq-master2#broker 192.168…

网络通信.

1.物理层&#xff1a;网络通信的基础设施 运快递的公路 2.数据链路层 两个相邻的节点之间如何传输 两个集散点之间的传输 3.网络层 两个点之间的路径规划 物流公司规划快递的路径 4.传输层 两个点之间的通信&#xff08;不考虑路径规划&#xff09; 卖家发货 只考虑起点和终点 …

C++ 特殊类及单例模式

文章目录 1. 前言2. 不能被拷贝的类3. 不能被继承的类4. 只能在堆上创建对象的类5. 只能在栈上创建对象的类6. 只能创建一个对象的类&#xff08;单例模式&#xff09; 1. 前言 在实际场景中&#xff0c;我们在编写类的过程中总会遇到一些特殊情况&#xff0c;比如设计一个类不…