前端学习之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>

结果


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

相关推荐

  1. css类和元素选择

    2024-03-18 16:06:01       5 阅读
  2. 006 CSS常见选择 CSSCSS元素

    2024-03-18 16:06:01       18 阅读
  3. 选择元素选择

    2024-03-18 16:06:01       15 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-18 16:06:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-18 16:06:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-18 16:06:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-18 16:06:01       20 阅读

热门阅读

  1. 对对架构决策记录的一些思考

    2024-03-18 16:06:01       18 阅读
  2. python 炸敌人。

    2024-03-18 16:06:01       22 阅读
  3. LeetCode 面试经典150题 45.跳跃游戏II

    2024-03-18 16:06:01       19 阅读
  4. [自研开源] MyData v0.7.2 更新日志

    2024-03-18 16:06:01       21 阅读
  5. 晶体管-二极管三极管MOS管选型参数总结

    2024-03-18 16:06:01       15 阅读
  6. 关机恶搞小程序的开发程序

    2024-03-18 16:06:01       18 阅读
  7. springboot中application.yml和properties的区别

    2024-03-18 16:06:01       19 阅读
  8. Spring Bean的生命周期

    2024-03-18 16:06:01       22 阅读
  9. csgo盲盒开箱支付平台接口通道如何申请!

    2024-03-18 16:06:01       17 阅读
  10. 2024年Microsoft Office计算机二级考试必考45题

    2024-03-18 16:06:01       21 阅读
  11. c语言:判断能否被3,5,7整除

    2024-03-18 16:06:01       18 阅读
  12. http发送post请求,发送参数为实体

    2024-03-18 16:06:01       22 阅读
  13. 2022蓝桥杯/修剪灌木/c\c++

    2024-03-18 16:06:01       19 阅读