3：选择器-2.3伪元素选择器

最新推荐文章于 2024-07-11 18:05:14 发布

原创最新推荐文章于 2024-07-11 18:05:14 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

13 篇文章

订阅专栏

本文介绍并演示了CSS伪元素选择器的实际应用，包括首字下沉、首行样式、选中文本样式及before与after伪元素的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、E::first-letter文本的第一个字母或字（如中文、日文、韩文等）

p {

width: 200px;

padding: 5px 10px;

border: 1px solid#ddd;

font: 14px/1.5simsun;

}

p::first-letter {

float: left;

font-size: 40px;

font-weight: bold;

line-height: 1;

}

<h1>杂志常用的首字下沉效果</h1>

<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

2、E::first-line 文本第一行；

p {

width: 200px;

padding: 5px 10px;

border: 1px solid #ddd;

font: 14px/1.5simsun;

}

p::first-line {

color: #090;

}

<h3>第一行文字的颜色与其它不同</h3>

<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

3、E::selection 可改变选中文本的样式；

p::selection {

background: #000;

color: #f00;

}

<h1>选中下面的文字，看看它的颜色</h1>

<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

p::before {

background: #fff;

color: red;

content: "如果你的能看到这段文字，说明你的浏览器支持E:before和E::before";

font-size: 14px;

}

p::after {

background: #fff;

color: pink;

content: "如果你的能看到这段文字，说明你的浏览器支持E:after和E::after";

font-size: 14px;

}

<p>我是一个段落</p>

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

":" 与 "::"区别在于区分伪类和伪元素

****相关代码(Day5-15伪元素选择器.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            font: 14px/1.5 simsun;
        }
        /*        第一个字符*/
        
        p::first-letter {
            float: left;
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
        }
        /*        第一行*/
        
        p::first-line {
            color: #090;
        }
        /*        选中文本后的效果*/
        
        p::selection {
            background: #000;
            color: #f00;
        }
    </style>
</head>

<body>
    <h1>杂志常用的首字下沉效果</h1>
    <p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
    <h1>选中下面的文字，看看它的颜色</h1>
    <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
</body>

</html>

相关效果（-）

****相关代码(Day5-16after和before伪元素选择器.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p::before {
            background: #fff;
            color: red;
            /*            内容*/
            content: "如果你的能看到这段文字，说明你的浏览器支持E:before和E::before";
            font-size: 14px;
        }
        
        p::after {
            background: #fff;
            color: pink;
            content: "如果你的能看到这段文字，说明你的浏览器支持E:after和E::after";
            font-size: 14px;
        }
    </style>
</head>

<body>
    <p>我是一个段落</p>
</body>

</html>