CSS が複数のクラスに一致する方法のサンプルコード

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする

次の HTML タグ li、クラスはオープン スタイルです。私の要件は、開いている状態とアクティブな状態が同時に存在する場合にのみ背景色を白に変更することです

<li id="menu_268098" title="アカウント情報クエリ" class="open">
        <li id="menu_270008" class="nav_sec" title="口座残高照会">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">口座残高照会</span>
            </a>
        </li>
    </ul>
</li>
<li id="menu_268098" title="アカウント情報クエリ" class="open active">
        <li id="menu_270008" class="nav_sec" title="口座残高照会">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">口座残高照会</span>
            </a>
        </li>
    </ul>
</li>

CSS は次のように記述できます。

li.open.active{
  背景色: #fff;
}

注意: .open.activeの間にはスペースを入れないでください。

要約する

CSS で複数のクラスを一致させる方法についての記事はこれで終わりです。CSS で複数のクラスを一致させる方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  固定テーブル幅テーブルレイアウト: 固定

>>:  レスポンシブ Web デザインが価値のない 5 つの理由

推薦する

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

MySQL alter ignore構文の詳細な説明

今日仕事中に、ビジネス側から次のような質問をされました。テーブルがあり、一意のフィールドを追加する必...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする

前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...

MySql 5.7.21 無料インストール バージョンの構成方法 (Win10 の場合)

1.インストールしたい場所に解凍し、my.iniファイルを作成します。 my.iniの内容は次のと...

カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較

1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...

Web インタビュー: MVC と MVVM の違いと、Vue が MVVM に完全に準拠していない理由

目次MVCとMVVMの違い前述のMVCC の概要長所と短所MVVM概要MVVM 実装者 — Vue ...

MySQLのスイッチングデータ保存ディレクトリの実装方法

MySQLのスイッチングデータ保存ディレクトリの実装方法今日、仕事中に、mysql が保存されている...

Linux カーネル デバイス ドライバー 高度な文字デバイス ドライバーのメモ

/****************** * 高度な文字デバイス ドライバー ***********...

MySQLのロックについて理解しておくべきこと

1. はじめにMySQL ロックは、その範囲に応じて、グローバル ロック、テーブル ロック、行ロック...