css3中的伪元素

最新推荐文章于 2023-06-22 19:29:38 发布

名叫Java

最新推荐文章于 2023-06-22 19:29:38 发布

阅读量134

点赞数

分类专栏：前端文章标签： css3 前端 css

本文链接：https://blog.csdn.net/T_reak/article/details/121051973

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

::before 创建一个伪元素，使其成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容

::after 创建一个伪元素，使其成为匹配选中元素的最后一个子元素，必须设置content属性表示其中的内

容

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter会选中某元素中（必须是块级元素）的第一行的第一个字母

::first-line会选中某元素中（必须是块级元素）的第一行的全部文字

在实际操作的时候::first-letter可能会冲突selection的样式设计？

将文档首字放大之后再次选中可以发现selection设置的背景颜色对其无效？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before{
            content: '★';
        }
        a::after{
            content: '❤';
        }
        .box1 p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .box1 p::selection{
            background: lightgreen;
        }
        .box1::first-letter{
            font-size: 80px;
        }
        .box1::first-line{
            text-decoration: underline;
        }
    </style>
</head>
<body>

     <a href="">我是超级链接</a>
     <a href="">我是超级链接</a>
     <a href="">我是超级链接</a>
     <div class="box1">
         <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
     </div>
</body>
</html>

名叫Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3中的伪元素

::before 创建一个伪元素，使其成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容 ::after 创建一个伪元素，使其成为匹配选中元素的最后一个子元素，必须设置content属性表示其中的内容 ::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分） ::first-letter会选中某元素中（必须是块级元素）的第一行的第一个字母 ::first-line...
复制链接

扫一扫