ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3擬似要素とは何ですか

css3擬似要素とは何ですか

青灯夜游オリジナル: 2022-01-06 11:08:542804ブラウズ

CSS3において、擬似要素とはセレクターの最後に付加されるキーワードで、文字通りの意味は「偽の要素」または「偽装要素」であり、実際には仮想的な要素であり、主に擬似要素が使用されます。 for DOM ツリーにない要素をいくつか作成し、それらにスタイルを追加します。

css3擬似要素とは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 擬似要素

擬似要素の文字通りの意味は、「偽の要素」または「偽装要素」です。実際、このように理解できます。疑似要素は実際には仮想要素です。要素は (コード形式では) 存在せず、文書内で見つけることもできないため、疑似要素は仮想要素です。

疑似要素はセレクターの最後に追加されるキーワードで、主に DOM ツリーにない要素を作成し、それらにスタイルを追加するために使用されます。

擬似要素を使用すると、要素の ID やクラス属性に頼ることなく、選択した要素の特定の部分のスタイルを定義できます。たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。

CSS1 および CSS2 では、疑似要素の使用方法は疑似クラスと同じであり、コロン : がセレクターに接続されます。ただし、CSS3 では、疑似クラスと疑似要素を区別するために、疑似要素に対する単一コロンの使用が二重コロン :: に変更されました。したがって、疑似要素を使用する場合は、単一コロンではなく二重コロンを使用することをお勧めします。

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

このうち、selectorはセレクター、pseudo-elementは擬似要素の名前、propertyはCSSにおける属性、valueは属性に対応する値です。

注: セレクター内で使用できる擬似要素は 1 つだけです。擬似要素はセレクターの後に続く必要があります。最新の W3C 仕様によれば、疑似クラスと疑似要素を区別するために、疑似要素を定義するときは単一コロン : ではなく二重コロン :: を使用する必要があります。ただし、古いバージョンの W3C 仕様では特別な区別がなかったので、ほとんどのブラウザは現在、擬似要素を定義するために単一コロンと二重コロンの両方のメソッドをサポートしています。

CSS は、次の表に示すように、一連の擬似要素を提供します。

##::beforep::before各

要素の前にコンテンツを挿入します

: :first -letterp::first-letter 各

要素のコンテンツの最初の文字と一致します

#::first -line p::first-line各

要素のコンテンツの最初の行と一致します

::selectionp::selectionユーザーが選択した要素の一部と一致します::placeholderinput::placeholder各フォーム入力ボックス ( など) のプレースホルダー属性と一致します。

1. ::after

伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::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(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::after</p>
    <p class="two">伪元素 ::after</p>
    <p class="three">伪元素 ::after</p>
</body>
</html>

运行结果如下图所示：

css3擬似要素とは何ですか

2. ::before

伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。

下面通过一个示例来演示伪元素 ::before 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::before {
            content:"要插入的内容";
            color: red;
            font-size: 6px;
        }
        p.three::before {
            content: url(&#39;./smiley.gif&#39;);
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">伪元素 ::before</p>
    <p class="two">伪元素 ::before</p>
    <p class="three">伪元素 ::before</p>
</body>
</html>

运行结果如下图所示：

css3擬似要素とは何ですか

3. ::first-letter

伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。

下面通过示例来演示伪元素 ::first-letter 的使用：

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

运行结果如下图所示：

css3擬似要素とは何ですか

4. ::first-line

伪元素 ::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>

运行结果如下图所示：

css3擬似要素とは何ですか

5. ::selection

伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。

下面通过示例来演示伪元素 ::selection 的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        p::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。 </p>
</body>
</html>

运行结果如下图所示：

css3擬似要素とは何ですか

6. ::placeholder

伪元素 ::placeholder 用来设置表单元素（、元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>

运行结果如下图所示：

css3擬似要素とは何ですか

（学习视频分享：css视频教程）

擬似要素	例	説明の例
::after	p::after	各要素の後にコンテンツを挿入します

以上がcss3擬似要素とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html Float class Property 对象 dom 选择器伪类伪元素 background input

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vueのv-bindとv-modelの違いは何ですか次の記事：vueのv-bindとv-modelの違いは何ですか

続きを見る