CSS疑似要素でできること-フロントエンドQ&A-php.cn

CSS 疑似要素は、選択した要素 (指定されたセレクター) に特殊効果を追加できます。疑似要素は、セレクターの末尾に追加されるキーワードです。開発者は、疑似要素を通じて、要素の ID やクラス属性を使用せずに、選択した要素の特定の部分のスタイルを定義できます。疑似クラスと疑似要素を区別するには、疑似要素を定義するときに二重コロン「::」を使用します。

CSS疑似要素でできること

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

CSS 疑似要素は、選択した要素 (指定されたセレクター) に特殊効果を追加できます。

#疑似要素とは何ですか?何ができるでしょうか？

要素は実際には HTML の概念であり、HTML のタグは要素と呼ばれることがよくあります。では、擬似要素とは何でしょうか? false は名前からして false を意味し、実際の DOM には存在しません。いくつかの CSS 機能を使用して要素としてシミュレートすることができ、そのような要素を疑似要素と呼びます。

CSS 疑似要素は、特定のセレクターに特殊効果を設定するために使用されます。要素の特定の位置を選択してスタイルを適用できます。

疑似要素は、実際にはセレクターの末尾に追加されるキーワードです。疑似要素を使用すると、要素の ID またはクラス属性を使用せずに、選択した要素の特定の部分のスタイルを定義できます。

たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。

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

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

ログイン後にコピー

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

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

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

例＃＃＃＃＃＃説明例：：前に＃＃＃＃＃＃ p::前各

要素のコンテンツの最初の文字

各

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

## ユーザーが選択した要素の部分と一致します ::プレースホルダー input::placeholder 各フォーム入力ボックスのプレースホルダー属性と一致します (例: )

<!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>

ログイン後にコピー

の使用 (学習ビデオ共有: css ビデオチュートリアル、)

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

：：後＃＃＃＃＃＃ p::after	各要素の後にコンテンツを挿入します
各要素の前にコンテンツを挿入します		：：最初の一文字＃＃＃＃＃＃ p::最初の文字
	# と一致します。 ::最初の行	p::最初の行
	：：選択＃＃＃＃＃＃ p::選択

例: pseudo-element::after
Web フロントエンド