CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法

CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法

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 をよろしくお願いいたします。

<<:  Vue の基本リスナーの詳細な説明

>>:  CentOS 8にdockerをインストールする最も詳細な方法

推薦する

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

Linux カーネル デバイス ドライバー カーネル時間管理に関する注意事項

/****************** * Linux カーネルの時間管理 ***********...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

解決策 - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: 権限が不十分です

1) jdkファイルが保存されているフォルダパスを入力します私はここにいますusr/local/jd...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

React-Native環境のセットアップと基本的な紹介

環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法

本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...

Docker ベースの nginx ファイル サーバーを構築する方法と手順

1. このマシンに新しい設定ファイルdocker_nginx.confを作成します。 サーバー{ 7...

SSH経由でリモートLinuxシステムでコマンドを実行する方法

場合によっては、リモート マシンでいくつかのコマンドを実行する必要があることがあります。これが時々行...

Vueの子コンポーネントと親コンポーネントの詳細な分析

目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....