CSS 疑似要素を使用して要素を制御する場合、一部の要素のスタイルを変更する必要があることがよくあります。インターネット上には、1 つの要素の変更を制御する方法について説明したブログがたくさんありますが、実際の執筆プロセスでは、連続する複数の要素の変更を制御する必要があることの方が多いことがわかりました。 疑似要素を使用して制御します (:hover を例にします)。マウスが A に留まると、BCD のスタイルが変更されます... AとBCDは隣接しており、同じレベルであるため、AはBCDの一番上にある必要があります。 <div class="A"></div> <div class="B"></div> <div class="C"></div> <div class="D"></div> //BCD を制御する A に対応する CSS コード。A:hover + .B{ 背景色: オレンジ; } .A:ホバー + .B+ .C{ 背景色: オレンジ; } .A:ホバー + .B+ .C+ .D{ 背景色: オレンジ; } A を別の位置に移動すると効果が得られません。また、CSS の下部に制御コードのみを記述すると、3 番目の要素のスタイル変更しか制御できず、複数の要素を同時に変更することはできません。 AはBCDです...父と息子の関係です <div class="A"> <div class="B"></div> <div class="C"></div> <div class="D"></div> </div> //対応するCSSコード.A:hover .B{ 背景色: オレンジ; } .A:ホバー .B+ .C{ 背景色: オレンジ; } .A:ホバー .B+ .C+ .D{ 背景色: オレンジ; } 最初のものは、要素 + 要素は隣接する要素を制御するため、実際には非常に理解しやすいです。A と CD は直接隣接していないため、一度に 1 レベルずつ検索します。まず B を検索します。BC は隣接しているため、制御を開始できます。D についても同様です。 2 番目のコードでは、要素 element は親ノードが子ノードを制御する方法です。A は B を直接制御できます。C を制御する必要がある場合は、まず B を見つけます。BC は隣接しているため、隣接要素の制御方法を使用して C を制御します。D についても同様です。 これで、CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法についてのこの記事は終了です。要素を制御する CSS 疑似要素の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: CentOS 8にdockerをインストールする最も詳細な方法
目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....
ルートジャンプ this.$router.push('/course'); this...
/****************** * Linux カーネルの時間管理 ***********...
環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...
この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...
今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...
1) jdkファイルが保存されているフォルダパスを入力します私はここにいますusr/local/jd...
mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...
MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...
環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...
この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...
本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...
1. このマシンに新しい設定ファイルdocker_nginx.confを作成します。 サーバー{ 7...
場合によっては、リモート マシンでいくつかのコマンドを実行する必要があることがあります。これが時々行...
目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....