CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)-CSSチュートリアル-php.cn

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

寻∝梦

リリース： 2018-09-08 13:43:10

オリジナル

10756 人が閲覧しました

今日の記事では主に 4 つの CSS スタイル疑似要素を紹介します。説明した CSS 疑似要素はどれも日常生活でよく使われるものです。それでは、この記事を一緒に見てみましょう。

まず、この記事で紹介した CSS スタイルの 4 つの疑似要素を見てみましょう:

:before この疑似要素は、要素
の前にコンテンツを追加するように定義されています。 after この擬似要素は、要素の後にコンテンツを追加で定義されています
:first-line この擬似要素は、テキストの最初の行に特別なスタイルを追加します
:first-letter この擬似要素は、特別なスタイルを追加しますstyleをテキストの最初の文字にします

これら4つこれらの疑似要素は、コードを記述するときによく使用される要素です。

次に最初の要素を見てみましょう:

:before、この要素は要素の前にコンテンツを追加します。

理解するために完全な例を見てみましょう:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>
</html>

ログイン後にコピー

これは通常のテキストドキュメントであり、表示は正常です。最初に画像を見て、次に比較してください:

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

これは次のとおりです。通常の段落次に、CSS スタイルの疑似要素を挿入して効果を確認しましょう:

CSS スタイルを先頭に追加します:

<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style>

ログイン後にコピー

結果は、p タグ内のテキストが同じテキストになります。ブラウザに表示される効果を見てください:

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

その効果は、p タグの前にありますか?

最初の before 疑似要素について説明しましたが、次に 2 番目の疑似要素について話しましょう:

:after: 要素の後にコンテンツを追加するのも非常に簡単で、前のコードの before を after に置き換えるだけです。。

コードを見てみましょう:

<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>

ログイン後にコピー

さて、コードは完成しました。ブラウザに表示される効果が上で述べたことと同じかどうか見てみましょう:

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

それは内容とまったく同じです。と述べられているので、最後にコンテンツが追加されたことは明らかです。

次に、3 番目の疑似要素の使用法について説明します。

: first-line: 最初の行の変更を設定し、2 行目は変更されません。

例を見てみましょう:

<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body>

ログイン後にコピー

最初の行に表示されるため、テキストのコピーをいくつかコピーしました。ブラウザによって表示される効果を見てみましょう:

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

が最初です。行は完全に変更されましたが、2 行目と 3 行目は変更されていないため、これらの疑似要素の使用法が誰でも簡単にわかるようになります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

CSS 学習マニュアルにアクセスして学習してください)

最後のものは次のとおりです: first-letter pseudo-element:

:first-letter: これは、テキストの最初の文字。

上記のテキストの最初の文を英語に変更しました:

<style type="text/css">
p:first-letter{color:red}
</style>

ログイン後にコピー

レンダリングを見てみましょう:

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)

これは成功していますか?私たちは皆、増幅やその他の効果のためにそれを使用します。

CSS スタイルの疑似要素に関するこの記事は以上です。一般的に使用される 4 つの疑似要素が紹介されており、皆様のお役に立てれば幸いです (CSS スタイルの知識をさらに学びたい場合は、PHP 中国語 Web サイト

css 学習マニュアルのコラムにアクセスして学習してください)。ご質問がございましたら、以下にメッセージを残してください。

【編集者のおすすめ】

CSSテーブルに枠線スタイルを追加するにはどうすればよいですか？ CSS テーブルの境界線スタイルの概要 (完全な例付き)

HTML タグのマウスオーバーで色を変更する方法、CSS でタグのマウスオーバースタイルを詳細に制御する方法

以上がCSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS擬似要素とは何ですか? CSS 疑似要素の詳細な紹介 (例を含む)