CSS3 における擬似クラスの一般的な使用法の詳細な説明

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した推奨される用途は、グラフィック生成です。一部の高度な UI 実装では、HTML コードを簡素化して読みやすさと保守性を向上させることができます。これら 2 つの擬似クラス アプリケーションは海外では非常に人気があり、繁栄していますが、私たちのフロントエンド開発者は一般的にこれら 2 つの擬似クラスを使用するという意識が欠けているようです。使用したい場合、せいぜい「明確なフローティング」アプリケーションのトレンドに従うだけです。

1. 基本的な使い方

:before と :after の機能は、指定された要素コンテンツ (要素自体ではありません) の前または後に、content 属性で指定されたコンテンツを含むインライン要素を挿入することです。最も基本的な使用法は次のとおりです。

#例:before {
    コンテンツ: "#";
    色: 赤;
}
 
#例:後{
    内容: "$";
    色: 赤;
}

どちらの疑似クラスもインライン要素に属しますが、display:block 属性を使用してブロック要素に変換できます。より一般的な使用法は、いくつかのスタイルを実装し、フローティング効果をクリアすることです。 。

2. スタイルの変更

コードは次のとおりです。

<div class="quote">
    <span>小さなアパート</span>
</div>
.quote:before、.quote:after{//これらの 2 つの疑似クラスを使用して、スタイル レンダリング コンテンツを実装します:"";
     表示:インラインブロック;
     幅:5%;
     マージン:5px 1%;
     border-bottom:1px 青一色;
}

効果は次の図に示されています。

ここに写真の説明を記入してください

3. クリアフロート

コードは次のようになります。

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">親2</div>
//cssコード.box1{
     幅:300ピクセル;
     高さ:200px;
     背景色: ライトグレー;
     フロート:左;
}
.box2{
     幅:300ピクセル;
     高さ:100px;
     背景色: 水色;
     フロート:左;
}
.親2{
     幅:400ピクセル;
     高さ: 400px;
     背景色:青;
     色:#fff;
     テキスト配置:中央;
     行の高さ:400px;
     フォントサイズ:30px;
}

浮動問題のため、実装効果は次のようになります。

ここに写真の説明を記入してください

上記のコードにこのコードを追加してフロートをクリアすると、異なる効果が得られます。

.parent:after{
     コンテンツ:"";
     display:block; //ブロック要素に設定 clear:both; //このプロパティを使用してフロートをクリアします}

達成された効果は以下の図に示されています。

ここに写真の説明を記入してください

CSS3 の before および after 疑似クラスの一般的な使用法に関するこの記事はこれで終わりです。CSS3 の before および after 疑似クラスに関するより詳しい情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linux でのマルチスレッドにおけるフォークの紹介

>>:  スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

推薦する

MySQL 8.0.19 インストール詳細チュートリアル (Windows 64 ビット)

目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...

Dockerコンテナシェルスクリプトの実行ステータスを監視する方法

シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...

H5でクリックされたときにaタグの背景色をキャンセルする方法

1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...

データベースの冗長フィールドを合理的に使用する方法

privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...

js 属性オブジェクトの hasOwnProperty メソッドの使用

オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...

レスポンシブWebデザイン学習(2) — 動画をレスポンシブにすることはできるのか?

前回のエピソードレビュー:昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説...

Vueは2つのルーティング許可制御メソッドを実装しています

目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

HTMLの最適化によりWebページの速度が向上

明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...

CSS 評価効果の星の例

何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...

Linux のプロセスクラッシュの原因をコアダンプ技術を使用して追跡する簡単な分析

最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...

vue3.0 でカルーセル コンポーネントをカプセル化する手順

目次1: カプセル化の考え方2. 包装工程3: ドットインジケーター4: 左と右のインジケーター5:...

背景のグラデーションと自動フルスクリーンを実現するCSSコード

背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...