本文主要是介绍CSS_2——伪元素选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. ::first-line选择器

匹配文本的第一行内容(仅限第一行)

::first-line选择器仅对块级元素内的第一行内容有效,而对于像a元素这类行内元素,是不起作用的.

    
    
        <style>
        ::first-line{
            background: yellow;
        }
        </style>
    
        
        <header data-yellow="true"><h4>一个无序列表：</h4></header>
        <section> 
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure illum nemo vero eius assumenda saepe veniam necessitatibus ratione, rem aperiam perspiciatis aspernatur quasi reprehenderit perferendis amet. Beatae voluptates id labore.</p>
        </section>
       <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae perspiciatis doloremque iusto nihil dicta reiciendis sapiente blanditiis, nisi pariatur nobis doloribus, at dolorem libero ipsum qui, repudiandae ipsa asperiores repellat.</section>
        
        
        
        

可以限定只对p元素起作用

只需要在::first-line前加上p就行

2. ::first-letter选择器

用于匹配每一行的第一个字

    <meta http-equiv="”Content-Type”" content="”text/html;" charset="utf8″">
    <style>
    ::first-letter{
        background: yellow;
        color: coral;
    }
    </style>

    
    <header data-yellow="true"><h4>一个无序列表：</h4></header>
    <section> 
        <p>凡是过往，皆为序章</p>
    </section>
    <section>
        我从未觉得孤独，说的浪漫些，我完全自由。
    </section>
    
    
   
        

3. ::before和::after

可以在指定元素前后加入文字或是图片

    <meta http-equiv="”Content-Type”" content="”text/html;" charset="utf8″">
    <style>
    p::before{
        content:"我说:"
    }
    p::after{
        content:url(https://pic.wodingche.com/carimg/fgpbifebz.jpeg)
    }
    </style>

    
    <header data-yellow="true"><h4>一个无序列表：</h4></header>
    <section> 
        <p>人生何其短 笑要格外甜</p>
    </section>
    <section>
        我从未觉得孤独，说的浪漫些，我完全自由。
    </section>
    
    
   
        

4. ::selection选择器

鼠标选中后添加效果

    <meta http-equiv="”Content-Type”" content="”text/html;" charset="utf8″">
    <style>
    ::selection{
        color: yellow;
        background: red;
    }
    </style>

    
    <header data-yellow="true"><h4>一个无序列表：</h4></header>
    <section> 
        <p>人生何其短 笑要格外甜</p>
    </section>
    <section>
        我从未觉得孤独，说的浪漫些，我完全自由。
    </section>
    
    
   
        

这篇关于CSS_2——伪元素选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！