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 つの理由

推薦する

DockerにFastDFSをインストールする方法

画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...

MySql 自動切り捨て例の詳細な説明

MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...

Vueは左上と右上のスライドナビゲーションを実装します

ナビゲーションなどは日々の開発でよく使うので、記録として記事を書きます。ナビゲーションは終了/開始位...

Windows で virtualenv を使用して仮想環境を作成する方法 (2 つの方法)

オペレーティング システム: windows10_x64 Python バージョン: 3.6.8仮想...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

ElementUIはドロップダウンオプションと複数選択ボックスのサンプルコードを実装します

目次ドロップダウン複数選択ボックスアップグレード - すべてのオプションを追加改訂と改善を求める製品...

18 個のキラー JavaScript ワンライナー

序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例

レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...

Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

この記事では、モバイルとPCで簡単なドラッグアンドドロップ効果を実現するためのTypescript ...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

Dockerコンテナの紹介

Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...