CSS 疑似要素は、選択した要素 (指定されたセレクター) に特殊効果を追加できます。疑似要素は、セレクターの末尾に追加されるキーワードです。開発者は、疑似要素を通じて、要素の ID やクラス属性を使用せずに、選択した要素の特定の部分のスタイルを定義できます。疑似クラスと疑似要素を区別するには、疑似要素を定義するときに二重コロン「::」を使用します。
このチュートリアルの動作環境: 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::after |
各 要素の後にコンテンツを挿入します | |
|---|
：：前に＃＃＃＃＃＃
p::前|
各 要素の前にコンテンツを挿入します | |
：：最初の一文字＃＃＃＃＃＃
p::最初の文字 |
各 要素のコンテンツの最初の文字
| # と一致します。
::最初の行 |
p::最初の行 |
各 要素のコンテンツの最初の行と一致します
|
：：選択＃＃＃＃＃＃
p::選択 | ##
ユーザーが選択した要素の部分と一致します |
::プレースホルダー |
input::placeholder |
各フォーム入力ボックスのプレースホルダー属性と一致します (例: ) |
| 例: 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>ログイン後にコピー
| の使用 | (学習ビデオ共有: css ビデオ チュートリアル
、| Web フロントエンド | ) |
以上がCSS疑似要素でできることの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのサイズを変更する方法
Apr 07, 2025 pm 03:18 PM
Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
See all articles
