CSS - 伪元素

Quiz

CSS pseudo-elements 用于样式化元素指定部分。在浏览网页时，你可能注意到某些段落的首字母比其他字母更大。这种针对元素特定部分的样式化就是使用 CSS 中的 pseudo-elements 实现的。本教程将解释所有 pseudo-elements 及其工作原理。

什么是 Pseudo-Element？

CSS 中的 pseudo-element 用于样式化元素特定部分，这些部分不属于 DOM（Document Object Model），也不存在于 HTML 标记中。例如，段落的首字母、input 元素中的 placeholder 文本或文档中的选定部分。

Pseudo-elements 使用双冒号（::）表示。
一个选择器中只能使用一个 pseudo-element。
选择器中的 pseudo-element 必须出现在所有其他组件之后。例如，p::last-line:hover 是无效的。
Pseudo-elements 可用于添加装饰样式、创建特殊效果，并修改已应用状态的元素某些部分的外观。例如，p:hover::last-line 是有效的语句，它选择段落悬停时段落的最后一行。

语法

selector::pseudo-element {
   property: value;
}

浏览器支持四种原始 pseudo-elements 的单冒号语法，即 ::before、::after、::first-line 和 ::first-letter。

内容插入 Pseudo-Elements

在 CSS 中，pseudo-elements ::before 和 ::after 用于在任何元素前后插入文本内容或图像。

示例

此示例展示如何使用 CSS 在段落的开头和结尾插入文本和图像。

<!DOCTYPE html>
<html>

<head>
    <style>
        p:before {
            content: "NOTE:";
            font-weight: bold;
        }
        p:after {
            content: url(/css/images/smiley.png);
        }       
    </style>
</head>

<body>
    <p>
        We inserted intro at start and emoji at end.
    </p>
</body>
</html>

CSS Backdrop 伪元素

在 CSS 中，::backdrop 伪元素用于样式化处于模态上下文中的元素的背景，例如 <dialog> 元素显示时其背后的背景。

示例

以下示例演示了 ::backdrop 伪元素的使用。

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            height: 200px;
        }
        dialog {
            padding: 20px;
            border: 2px solid black;
            border-radius: 10px;
        }
        dialog::backdrop {
            /* 半透明黑色 */
            background-color: rgba(0, 0, 0, 0.5); 
        }
    </style>
</head>

<body>
    <h3> Backdrop Example </h3>

    <dialog id="myDialog">
        <p> This is a dialog with a styled backdrop. </p>
        <button id="closeButton"> Close </button>
    </dialog>

    <button id="openButton">Open Dialog</button>

    <script>
        const dialog = document.getElementById('myDialog');
        const openButton = document.getElementById('openButton');
        const closeButton = document.getElementById('closeButton');

        openButton.addEventListener('click', () => {
            dialog.showModal();
        });

        closeButton.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

CSS Cue 伪元素

在 CSS 中，::cue 伪元素与 Web Video Text Tracks 一起使用，用于样式化媒体元素（如 <video> 和 <audio>）的文本轨道特定部分，例如字幕或说明。

示例

以下示例演示了 ::cue 伪元素的使用：

<!DOCTYPE html>
<html>
<head>
<style>
    video {
        width: 100%;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="/css/foo.mp4">
        <track default kind="captions" 
               srclang="en" src="/css/cue-sample.vtt" />
    </video>    
</body>
</html>

CSS First-Letter 伪元素

在 CSS 中，::first-letter 伪元素用于针对任何元素（如 div、paragraph、span 等）文本内容的首字母。

示例

以下示例演示了 ::first-letter 伪元素的使用：

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        this is a paragraph with first letter in lowercase, 
        we used ::first-letter pseudo-element to capitalize
        first-letter of paragraph with a larger font size 
        and a different color. 
    </p>
</body>

</html>

CSS First-Line 伪元素

在 CSS 中，::first-line 伪元素用于针对任何元素（如 div、paragraph、span 等）文本内容的首行。

示例

以下示例演示了 ::first-line 伪元素的使用：

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-line { 
            background-color: #f0f0f0;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        This is a normal paragraph with no stylings, we used 
        ::first-line pseudo-element to only style first-line of 
        paragraph by adding a background color, font-style and 
        text color
    </p>
</body>

</html>

CSS ::file-selector-button 伪元素

在 CSS 中，::file-selector-button 伪元素用于在现代浏览器中为文件 input 元素（<input type="file">）的按钮进行样式设置。

示例

以下示例演示了 ::file-selector-button 伪元素的使用：

<!DOCTYPE html>
<html> 

<head>
    <style>
        body {
            display: block;
            height: 100px;
        }

        input::file-selector-button {
            background-image:url(/css/images/border.png);
            background-size: 200%;
            border: 2px solid black;
            border-radius: 8px;
            font-weight: 600;
            color: rgb(6, 1, 9);
            padding: 15px;
            transition: all 0.25s;
        }
    </style>
</head>

<body>
    <h2> Select a file </h2>
    <input type="file">
</body>

</html>

CSS ::marker 伪元素

在 CSS 中，::marker 伪元素用于为 有序列表 和 无序列表 的标记进行样式设置。

示例

以下示例演示了 ::marker 伪元素的使用：

<!DOCTYPE html>
<html> 

<head>
    <style>
        ol li::marker {
            color: rgb(11, 38, 241);
            font-weight: bold;
        }
        ul li::marker {
            content: url('/css/images/smiley.png')
        }
    </style>
</head>

<body>
    <h2>Numbered list</h2>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>

    <h2>Bulleted list</h2>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>

</html>

CSS ::placeholder 伪元素

在 CSS 中，::placeholder 伪元素用于为文本 input 元素（<input type="text">）内的默认文本进行样式设置。

示例

以下示例演示了 ::placeholder 伪元素的使用：

<!DOCTYPE html>
<html> 
<head>
    <style>
        .form {
            border: 2px solid black;
            background: lightgray;
            padding: 25px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        input{
            padding: 10px;
            background-color: cornsilk;
        }

        input::placeholder { 
            color: grey; 
            font-style: italic;
            font-size: 20px;
        } 
    </style>
</head>

<body>
    <div class="form">
        <h2> Your Details:</h2>

        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="Address">
        <input type="text" placeholder="Phone">
    </div>
</body>

</html>

CSS ::selection 伪元素

在 CSS 中，::selection 伪元素用于为用户选中的文本进行样式设置，这些文本位于任何元素内，如 div、段落、span 等。

示例

以下示例演示了 ::selection 伪元素的使用：

<!DOCTYPE html>
<html> 

<head>
    <style>
        .highlight::selection { 
            color: yellow;
            background: brown;
        } 
    </style>
</head>

<body>
    <p class="highlight">
        Select Me!!! to see the effect.
    </p>
    <p> No style applied to me. </p>
</body>
</html>

多个伪元素

我们也可以为一个选择器添加多个伪元素，请查看示例。

Example

以下示例演示了多个伪元素（::first-line 和 ::first-letter）的用法。

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line { 
            text-decoration: underline;
        }
        
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: red;
        }
    </style>
</head>
<body>
    <p>
        the first line of this paragraph will be underlined and 
        first letter is uppercase, 2em and red in color, as the
        pseudo-element ::first-line & ::first-letter is applied 
        on p. The other lines are not underlined.
    </p>
</body>
</html>

所有 CSS 伪元素

下表列出了 CSS 中的所有伪元素：

伪元素	描述	示例
::after	添加一个伪元素，作为选中元素的最后一个子元素。	试一试
::backdrop	用于样式化元素（如对话框）的背景。	试一试
::before	添加一个伪元素，作为选中元素的第一个子元素。	试一试
::cue	用于样式化带有视频文本轨道的媒体中的字幕和提示。	试一试
::first-letter	将样式应用于块级元素的首行首字母。	试一试
::first-line	将样式应用于块级元素的首行。	试一试
::file-selector-button	表示 type="file" 的 <input> 的按钮部分。	试一试
::marker	选择列表项的标记框。	试一试
::part()	表示 shadow tree 中具有匹配 part 属性的元素。	试一试
::placeholder	表示 <input> 或 <textarea> 元素中的占位符文本。	试一试
::selection	将样式应用于文档的选中文本部分（通过点击并拖动鼠标选择）。	试一试
::slotted()	表示放置到 HTML 模板中 slot 的元素。	试一试
::grammar-error	用于样式化浏览器内置语法检查工具识别为语法错误的文本。	试一试
::spelling-error	用于样式化浏览器内置拼写检查工具识别为拼写错误的文本。	试一试

笙亿网络策划

CSS 伪元素怎么用？

CSS - 伪元素

目录

什么是 Pseudo-Element？

语法

内容插入 Pseudo-Elements

示例

CSS Backdrop 伪元素

示例

CSS Cue 伪元素

示例

CSS First-Letter 伪元素

示例

CSS First-Line 伪元素

示例

CSS ::file-selector-button 伪元素

示例

CSS ::marker 伪元素

示例

CSS ::placeholder 伪元素

示例

CSS ::selection 伪元素

示例

多个伪元素

Example

所有 CSS 伪元素

CSS 伪元素怎么用？

CSS - 伪元素

目录

什么是 Pseudo-Element？

语法

内容插入 Pseudo-Elements

示例

CSS Backdrop 伪元素

示例

CSS Cue 伪元素

示例

CSS First-Letter 伪元素

示例

CSS First-Line 伪元素

示例

CSS ::file-selector-button 伪元素

示例

CSS ::marker 伪元素

示例

CSS ::placeholder 伪元素

示例

CSS ::selection 伪元素

示例

多个伪元素

Example

所有 CSS 伪元素

相关问答