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 つのヒント

推薦する

ftp は SSH 経由で Linux にリモート接続します

まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...

Centos6.6 で php7 + nginx 環境をインストールする方法

この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

MySQL 数千万のビッグデータに対するSQLクエリ最適化の知識ポイントのまとめ

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

MySQL マルチバージョン同時実行制御 MVCC の実装

目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...

Vue3を使用してjsで呼び出せるコンポーネントを実装する

目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...

mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。

方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選

スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...

IntelliJ IDEA で Java を使用して MySQL データベースに接続する方法の詳細な説明

1. MySQLデータベースをダウンロードし、インストールして設定するダウンロードアドレス: htt...

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

MySQLデータベースの増分バックアップのアイデアと方法

MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....