关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS伪元素

CSS伪元素

伪元素是添加到选择器末尾的关键字。这允许您为选定元素的特定部分定义样式，而无需依赖元素的 ID 或类属性。例如，您可以使用伪元素来设置段落第一个字符的样式或在元素之前或之后插入内容。

在 CSS1 和 CSS2 中，使用伪元素与使用伪类相同，只是在选择器上附加一个冒号: 。然而，CSS3 将伪元素中单个冒号的使用更改为双冒号::以区分伪类和伪元素。因此，在使用伪元素时，建议使用双冒号，而不是单冒号。

选择器::伪元素{
财产：价值；
}

其中，selector是选择器，pseudo-element是伪元素的名称，property是CSS中的属性，value是属性对应的值。

注意：选择器中只能使用一个伪元素。伪元素必须紧跟在选择器之后。根据最新的W3C规范，为了区分伪类和伪元素，在定义伪元素时应该使用两个冒号::而不是一个冒号: 。然而，旧版本的W3C规范并没有做出特殊的区分，现在大多数浏览器都支持单冒号和双冒号方法来定义伪元素。

CSS 提供了一组伪元素，如下表所示。

伪元素例子示例说明
::afterp::after在每个 <p> 元素后插入内容
::beforep::before在每个 <p> 元素之前插入内容
::first-letterp::first-letter匹配每个 <p> 元素中内容的第一个字符。
::first-linep::first-line匹配每个 <p> 元素中的第一行内容。
::selectionp::selection匹配用户选择的元素部分
::placeholderinput::placeholder匹配每个表单输入框的占位符属性（例如 <input>）

1.::之后

伪元素::after可以在指定元素后面插入一些内容。::after需要使用content属性来定义要添加的内容，而::after则要求在指定元素后面插入content属性。必须定义为使用效果进行检索（插入的内容不能将内容属性的值定义为空"" ）。

下面通过一个例子来演示pseudo-element::after的用法。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"挿入するコンテンツ";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">疑似要素 ::after</p>
    <p class="two">疑似要素 ::after</p>
    <p class="three">疑似要素 ::after</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_723”对齐=“aligncenter”宽度=“806”] 图：使用伪元素::after插图：使用伪元素::after[/caption]

2.::之前

伪元素::before 在指定元素之前插入内容。与::after类似，::before也需要一个content属性来定义要添加的内容，并且必须在::before中定义一个content属性才能生效（如果没有要插入的内容）， content 属性可以定义为空的"" )。

下面通过一个例子来演示pseudo-element::before的用法。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.ichi::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.ni::before {
            content:"要挿入する内容";
            color: red;
            font-size: 6px;
        }
        p.san::before {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="ichi">疑似要素 ::before</p>
    <p class="ni">疑似要素 ::before</p>
    <p class="san">疑似要素 ::before</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_726”对齐=“aligncenter”宽度=“878”] 图：使用伪元素::before图表：使用伪元素::before[/caption]

3.::第一个字母

伪元素::first-letter用于设置给定元素内容的第一个字母的样式，通常与font-size和float属性结合使用以创建首字下沉效果。伪元素::请注意，第一个字母只能用于块级元素，如果内联元素使用此伪元素，则必须首先将其转换为块级元素。

以下示例显示了伪元素::first-letter 的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>擬似要素 ::first-letter</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_727”对齐=“aligncenter”宽度=“966”] 插图：使用伪元素::first-letter插图：使用伪元素::first-letter[/caption]

4.::第一线

伪元素::first-line用于设置指定元素第一行内容的样式，与::first-letter类似，伪元素::first-line是块级元素。使用这个伪元素作为内联元素，我们需要先将它们转换为块级元素。

以下示例显示了伪元素::first-line 的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>要素 ::first-line は、指定された要素内の最初の一行のスタイルを設定するために使用されます。 ::first-letter と同様に、伪要素 ::first-line はブロック要素にのみ使用できます。インライン要素を使用する場合は、まずブロック要素に変換する必要があります。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_728”对齐=“aligncenter”宽度=“1024”] 图表：使用伪元素::第一行插图：使用伪元素::first-line[/caption]

5.::选择

Pseudoelement::selection 用于在选择对象时设置样式。当选择元素时，pseudoelement::selection 仅更改颜色、背景、光标、轮廓和文本阴影。注意，您可以定义选定的（IE11）。尚不支持定义此属性）和其他属性。

下面的例子演示了pseudo-element::selection的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .selected-text::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>要素 ::selection は、オブジェクトが選択された時に適用されるスタイルを設定するために使用されます。ただし、要素 ::selection 中では、color、background、cursor、outline およびtext-shadow （IE11 では定義できない）などの属性を定義することができます。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_729”对齐=“aligncenter”宽度=“1024”] 图表：使用伪元素::选择插图：伪元素::使用选择[/caption]
6.::占位符

要为表单元素（<input>、<textarea> 元素）设置占位符文本（使用 HTML 占位符属性设置的文本），请使用pseudo-element::placeholder。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        input.search::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="テキストを入力してください">疑似要素 ::placeholder が使用されていません<br>
    <input placeholder="テキストを入力してください" class="search">疑似要素 ::placeholder を使用した効果
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_730”对齐=“aligncenter”宽度=“1024”] 图表：伪元素::使用占位符插图：伪元素::使用占位符[/caption]

通俗易懂的《CSS伪元素（非常多余）》解释！您必须观看的最佳 2 个视频

【HTML/CSSコーディング】超便利な擬似要素。data属性も。
https://www.youtube.com/watch?v=ltR00hSVZow&pp=ygUoQ1NTIOeWkeS8vOimgee0oCAo6Z2e5bi444Gr5YaX6ZW3KSZobD1KQQ%3D%3D
2-7 構造的な擬似要素（CSSのセレクタ）
https://www.youtube.com/watch?v=ghgNW-DcVuI&pp=ygUoQ1NTIOeWkeS8vOimgee0oCAo6Z2e5bi444Gr5YaX6ZW3KSZobD1KQQ%3D%3D
伪元素是添加到选择器末尾的关键字。这允许您为选定元素的特定部分定义样式，而无需依赖元素的 ID 或类属性。例如，您可以使用伪元素来设置段落第一个字符的样式或在元素之前或之后插入内容。

在 CSS1 和 CSS2 中，使用伪元素与使用伪类相同，只是在选择器上附加一个冒号: 。然而，CSS3 将伪元素中单个冒号的使用更改为双冒号::以区分伪类和伪元素。因此，在使用伪元素时，建议使用双冒号，而不是单冒号。

选择器::伪元素{
财产：价值；
}

其中，selector是选择器，pseudo-element是伪元素的名称，property是CSS中的属性，value是属性对应的值。

注意：选择器中只能使用一个伪元素。伪元素必须紧跟在选择器之后。根据最新的W3C规范，为了区分伪类和伪元素，在定义伪元素时应该使用两个冒号::而不是一个冒号: 。然而，旧版本的W3C规范并没有做出特殊的区分，现在大多数浏览器都支持单冒号和双冒号方法来定义伪元素。

CSS 提供了一组伪元素，如下表所示。

伪元素例子示例说明
::afterp::after在每个 <p> 元素后插入内容
::beforep::before在每个 <p> 元素之前插入内容
::first-letterp::first-letter匹配每个 <p> 元素中内容的第一个字符。
::first-linep::first-line匹配每个 <p> 元素中的第一行内容。
::selectionp::selection匹配用户选择的元素部分
::placeholderinput::placeholder匹配每个表单输入框的占位符属性（例如 <input>）

1.::之后

伪元素::after可以在指定元素后面插入一些内容。::after需要使用content属性来定义要添加的内容，而::after则要求在指定元素后面插入content属性。必须定义为使用效果进行检索（插入的内容不能将内容属性的值定义为空"" ）。

下面通过一个例子来演示pseudo-element::after的用法。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"挿入するコンテンツ";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">疑似要素 ::after</p>
    <p class="two">疑似要素 ::after</p>
    <p class="three">疑似要素 ::after</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_723”对齐=“aligncenter”宽度=“806”] 图：使用伪元素::after插图：使用伪元素::after[/caption]

2.::之前

伪元素::before 在指定元素之前插入内容。与::after类似，::before也需要一个content属性来定义要添加的内容，并且必须在::before中定义一个content属性才能生效（如果没有要插入的内容）， content 属性可以定义为空的"" )。

下面通过一个例子来演示pseudo-element::before的用法。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.ichi::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.ni::before {
            content:"要挿入する内容";
            color: red;
            font-size: 6px;
        }
        p.san::before {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="ichi">疑似要素 ::before</p>
    <p class="ni">疑似要素 ::before</p>
    <p class="san">疑似要素 ::before</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_726”对齐=“aligncenter”宽度=“878”] 图：使用伪元素::before图表：使用伪元素::before[/caption]

3.::第一个字母

伪元素::first-letter用于设置给定元素内容的第一个字母的样式，通常与font-size和float属性结合使用以创建首字下沉效果。伪元素::请注意，第一个字母只能用于块级元素，如果内联元素使用此伪元素，则必须首先将其转换为块级元素。

以下示例显示了伪元素::first-letter 的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>擬似要素 ::first-letter</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_727”对齐=“aligncenter”宽度=“966”] 插图：使用伪元素::first-letter插图：使用伪元素::first-letter[/caption]

4.::第一线

伪元素::first-line用于设置指定元素第一行内容的样式，与::first-letter类似，伪元素::first-line是块级元素。使用这个伪元素作为内联元素，我们需要先将它们转换为块级元素。

以下示例显示了伪元素::first-line 的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>要素 ::first-line は、指定された要素内の最初の一行のスタイルを設定するために使用されます。 ::first-letter と同様に、伪要素 ::first-line はブロック要素にのみ使用できます。インライン要素を使用する場合は、まずブロック要素に変換する必要があります。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_728”对齐=“aligncenter”宽度=“1024”] 图表：使用伪元素::第一行插图：使用伪元素::first-line[/caption]

5.::选择

Pseudoelement::selection 用于在选择对象时设置样式。当选择元素时，pseudoelement::selection 仅更改颜色、背景、光标、轮廓和文本阴影。注意，您可以定义选定的（IE11）。尚不支持定义此属性）和其他属性。

下面的例子演示了pseudo-element::selection的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .selected-text::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>要素 ::selection は、オブジェクトが選択された時に適用されるスタイルを設定するために使用されます。ただし、要素 ::selection 中では、color、background、cursor、outline およびtext-shadow （IE11 では定義できない）などの属性を定義することができます。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_729”对齐=“aligncenter”宽度=“1024”] 图表：使用伪元素::选择插图：伪元素::使用选择[/caption]
6.::占位符

要为表单元素（<input>、<textarea> 元素）设置占位符文本（使用 HTML 占位符属性设置的文本），请使用pseudo-element::placeholder。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        input.search::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="テキストを入力してください">疑似要素 ::placeholder が使用されていません<br>
    <input placeholder="テキストを入力してください" class="search">疑似要素 ::placeholder を使用した効果
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_730”对齐=“aligncenter”宽度=“1024”] 图表：伪元素::使用占位符插图：伪元素::使用占位符[/caption]

通俗易懂的《CSS伪元素（非常多余）》解释！您必须观看的最佳 2 个视频

【HTML/CSSコーディング】超便利な擬似要素。data属性も。
https://www.youtube.com/watch?v=ltR00hSVZow&pp=ygUoQ1NTIOeWkeS8vOimgee0oCAo6Z2e5bi444Gr5YaX6ZW3KSZobD1KQQ%3D%3D
2-7 構造的な擬似要素（CSSのセレクタ）
https://www.youtube.com/watch?v=ghgNW-DcVuI&pp=ygUoQ1NTIOeWkeS8vOimgee0oCAo6Z2e5bi444Gr5YaX6ZW3KSZobD1KQQ%3D%3D

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved