伪元素与伪元素选择器

comegoing-归去兮来

已于 2022-07-31 08:52:11 修改

阅读量71

点赞数

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

于 2022-07-13 16:31:30 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125766815

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、效果展示

二、知识讲解

1、基本格式

元素名+::+类型名+{}（请忽略加号）

2、常用类型

（1）first-letter

选中某元素的第一个字符，对该字符进行样式设计

p::first-letter{
    color: red;
    font-size: 40px;
}

（2）first-line

选中某元素的第一行（行的长度依据浏览器而定），进行样式设计

p::first-line{
    color: blue;
    font-size: 30px;
}

（3）before和after

在元素的最开始和结束进行样式设计，独立于自定义文本内容，无法被鼠标选中

p::before{
    content: '[';
    color: green;
}
p::after{
    content: ']';
    color: green;
}

（4）selection

鼠标选中时展现的样式

p::selection{
    color: skyblue;
 }

三、代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪元素</title>
        <style>
            p::first-letter{
                color: red;
                font-size: 40px;
            }
            p::before{
                content: '[';
                color: green;
            }
            p::after{
                content: ']';
                color: green;
            }
            p::first-line{
                color: blue;
                font-size: 30px;
            }
            p::selection{
                color: skyblue;
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Numquam odit neque eveniet asperiores assumenda blanditiis optio veritatis eos officiis dolorem nemo voluptatum quia ea fuga eum, eius minima nulla harum.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet nisi eveniet exercitationem? Ea, inventore voluptate quaerat tempore deserunt temporibus amet obcaecati eum sequi rerum provident nemo sed harum, eius tenetur.</p>
        
    </body>
</html>