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

伪元素选择器

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

<!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>

结果


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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis命名设计

可读性和管理性 以项目名为前缀(防止key冲突)&#xff0c;用冒号分隔&#xff0c;比如项目名:表名:id zh(知乎):news_data(新闻数据):2(主键id) zh:news_data:2 精简性 key的命名&#xff0c;尽量精简&#xff0c;key的名字长度对内存的占用不可忽视&#xff0c;我们来实际…

读者交流群

自开设公众号以来&#xff0c;收到众多读者的关注&#xff0c;所以我很高兴在这里向大家推荐加入我的技术交流群。如果你对Java和Go语言有兴趣&#xff0c;想要与其他同好分享经验和知识&#xff0c;那么这个读者群将是一个理想的选择。 在这个读者群中&#xff0c;我们有机会与…

git基础命令(四)之分支命令

目录 基础概念git branch-r-a-v-vv-avv重命名分支删除分支git branch -h git checkout创建新的分支追踪远程分支同时切换到该分支创建新的分支并切换到该分支撤销对文件的修改&#xff0c;恢复到最近的提交状态&#xff1a;丢弃本地所有修改git checkout -h git merge合并指定分…

docker 安装minio,详细图解

废话不多说&#xff0c;直接上干货 docker 安装minio 拉取镜像 docker pull minio/minio创建数据目录、配置目录 mkdir /opt/minio/data mkdir /opt/minio/config启动容器 docker run -p 9000:9000 -p 9090:9090 \--name minio \-d --restartalways \-e "MINIO_ACCESS_KE…

[全网首发中文版]LLM4Decompile: Decompiling Binary Code with Large Language Models

LLM4Decompile: Decompiling Binary Code with Large Language Models 摘要 反编译的目的是将编译后的代码恢复为人类可读的源代码&#xff0c;但在名称和结构等细节上遇到了困难。 大型语言模型&#xff08;大语言模型&#xff09;显示出编程任务的前景&#xff0c;激励其应…

如何用大模型做出一款属于自己的 AI 应用?

语言模型是怎么回事 语言模型&#xff08; language model&#xff0c;LM &#xff09;简单来说&#xff0c;就是利用自然语言构建的模型。 自然语言就是我们日常生活、学习和工作中常用的文字。语言模型就是利用自然 语言文本构建的&#xff0c;根据给定文本&#xff0c;输出…

jquery 合并单元格

原始表格 合并后的单元格 直接上代码 //合并第一列单元格//给tbody下的第一行(tr:first-child)第一个单元格(td).eq(0))//加上rowspan 长度是这个表格tr的长度(attr(rowspan, $("tbody tr").length);)$(tbody tr:first-child td).eq(0).attr(rowspan, $("t…

idea2023 运行多 springboot 实例

概要 1、修改idea运行多实例&#xff08;本地测试负载&#xff09; 你可能用到其他 1、改造项目缓存token 至redis 支持负载均衡部署 SpringSecurity6.0RedisJWTMP基于token认证功能开发&#xff08;源码级剖析可用于实际生产项目&#xff09;_springsecurity redis管理token…

算法导论第十二章练习参考答案(22) - 12.1-12.4

Exercise 12.1-1 任何时候&#xff0c;如果一个节点有一个子节点&#xff0c;就把它当作右子节点&#xff0c;左子节点为NIL。 Exercise 12.1-2 二叉搜索树的属性保证了左子树的所有节点都更小&#xff0c;右子树的所有节点都更大。最小堆属性只保证一般的子节点大于父节点的关…

3.18 杂题小结

类似的对于n个物体根据其某种递减关系选择的题目可以利用数位 &#xff1a;当前字符可以选也可以不选 &#xff01;&#xff1a;当前字符无法选 思路&#xff1a;需要同一位置多次比对的一般使用动态规划&#xff08;背包中物品是否拿取、字符串取舍与修改方式等&#xff09;…

2024华为OD统一考试(C卷)最新题库(Java Python C++)

关于华为OD ​ 华为的员工补充途径有三种&#xff0c;分别是校招、OD转正和社招。校招是华为唯一的正式员工入职途径&#xff0c;但是从近几届开始竞争非常激烈&#xff0c;尤其是在CV、AI、NLP等赛道上&#xff0c;所以对于C9等专业的学生来说&#xff0c;可以考虑转向一些冷…

Python轴承故障诊断 (17)基于TCN-CNN并行的一维故障信号识别模型

往期精彩内容&#xff1a; Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 Python轴承故障诊断 (一)短时傅里叶变换STFT Python轴承故障诊断 (二)连续小波变换CWT_pyts 小波变换 故障-CSDN博客 Python轴承故障诊断 (三)经验模态分解EMD_轴承诊断 …

Cannot access aliyunmaven ( xxx ) in offline mode and the artifact

记一次Maven无脑报错 报错提示&#xff1a; Cannot access aliyunmaven (https://maven.aliyun.com/repository/public) in offline mode and the artifact 当看到这个报错信息后&#xff0c;首先想到的就是maven环境变量是否配置正确&#xff0c;然而经过一番查看后&#xf…

minio数据迁移工具rclone使用

文章目录 前言一、下载rclone二、安装配置三、迁移命令结尾 前言 Rclone是一个命令行程序&#xff0c;用于管理云存储上的文件。它是云供应商的web存储接口的一个功能丰富的替代品。超过40种云存储产品支持rclone&#xff0c;包括S3对象存储、企业和消费者文件存储服务以及标准…

mysql 索引(为什么选择B+ Tree?)

索引实现原理 索引&#xff1a;排好序的数据结构 优点&#xff1a;降低I/O成本&#xff0c;CPU的资源消耗&#xff08;数据持久化在磁盘中&#xff0c;每次查询都得与磁盘交互&#xff09; 缺点&#xff1a;更新表效率变慢&#xff0c;&#xff08;更新表数据&#xff0c;还要…

DockerFile遇到的坑

CMD 命令的坑 dockerfile 中的 CMD 命令在docker run -it 不会执行 CMD 命令。 FROM golang WORKDIR / COPY . ./All-in-one CMD ["/bin/sh","-c","touch /kkk.txt && ls -la"] RUN echo alias ll"ls -la" > ~/.bashrc(不…

【LeetCode热题100】101. 对称二叉树(二叉树)

一.题目要求 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 二.题目难度 简单 三.输入样例 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&a…

Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(后记)

2024.03.05&#xff1a; 测试了开发板网线直连电脑可以传输数据。但是通过开发板→交换机→电脑&#xff0c;没有数据传输。通讯采用UDP通讯&#xff0c;一个是无法满足后续对采集数据的傅里叶变换和傅里叶逆变换的处理。二是无法通过交换机传输数据。 2024.03.07&#xff1a…

【2024第一期CANN训练营】Ascend C算子开发进阶篇

文章目录 【2024第一期CANN训练营】Ascend C算子开发进阶篇1. 工程创建2. Kernel侧核函数实现2.1 核函数定义&#xff08;add_custom.cpp&#xff09;2.2 KernelAdd类实现 3. Host侧算子实现&#xff08;add_custom_tiling.h &#xff0c;add_custom.cpp&#xff09;3.1 Tiling…

以电折水智能遥测终端机RTU应用哪些省份?

以电折水主要研究耗电量与取水量之间的关系&#xff0c;分析水电折算系数&#xff0c;进而通过计算耗电量与水电折算系数的乘积来推求取水量。 以电折水智能遥测终端机RTU通过高度集成化设计&#xff0c;巧妙融合了空气开关、开关电源、隔离变压器、接触器、智能电表、RTU、4G…