零基础学习CSS(4)——::first-line、::first-letter、::before、::after、::selection

Dragon水魅

发布于 2026-01-23 14:49:33

840

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

::first-line选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-line.html ::first-letter选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-letter.html ::before选择器：https://man.ilovefishc.com/pageCSS3/dotBefore.html ::after选择器：https://man.ilovefishc.com/pageCSS3/dotAfter.html ::selection选择器：https://man.ilovefishc.com/pageCSS3/dotdotselection.html

::first-line 选择器，修改文本的第一行内容，且不受浏览器尺寸限制： 仅对块级元素的第一行内容有效，行内元素不起作用。

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /*p::first-line：仅对 p 元素生效*/
        ::first-line{  /* 修改文本第一行内容 */
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/">点开，里面有好东西！</a>
</body>
</html>

::first-letter 选择器，修改文本的第一个字符：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        p::first-letter{
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/">点开，里面有好东西！</a>
</body>
</html>

::before 选择器，在被选中的文字前面加入内容： ::after 选择器，在被选中的文字后面加入内容：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 在p元素前后加入内容 */
        a::before{
            content: "加在开头";
        }
        a::after{
            content: "加在最后";
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>

::selection 选择器，用于修改用户选中文本的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 在p元素前后加入内容 */
        ::selection {
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>