Beispielcode, wie CSS mehrere Klassen abgleicht

Beispielcode, wie CSS mehrere Klassen abgleicht

CSS stimmt mit mehreren Klassen überein

Das folgende HTML-Tag „li, class“ hat den offenen Stil. Meine Anforderung ist, die Hintergrundfarbe nur dann auf Weiß zu ändern, wenn „offen“ und „aktiv“ gleichzeitig vorhanden sind.

<li id="menu_268098" title="Abfrage der Kontoinformationen" class="open">
        <li id="menu_270008" class="nav_sec" title="Kontostandabfrage">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">Kontostandabfrage</span>
            </a>
        </li>
    </ul>
</li>
<li id="menu_268098" title="Abfrage der Kontoinformationen" class="open active">
        <li id="menu_270008" class="nav_sec" title="Kontostandabfrage">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">Kontostandabfrage</span>
            </a>
        </li>
    </ul>
</li>

Das CSS kann wie folgt geschrieben werden:

li.öffnen.aktiv{
  Hintergrundfarbe: #fff;
}

Hinweis: Zwischen .open.active darf kein Leerzeichen stehen

Zusammenfassen

Dies ist das Ende dieses Artikels zum Abgleichen mehrerer Klassen in CSS. Weitere Informationen zum Abgleichen mehrerer Klassen in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Feste Tabellenbreite table-layout: fest

>>:  5 Gründe, warum sich Responsive Webdesign nicht lohnt

Artikel empfehlen

Implementierung des klassischen CSS-Sticky-Footer-Layouts

Was ist ein Sticky-Footer-Layout? Unser übliches ...

Vue implementiert einen Countdown zwischen angegebenen Daten

In diesem Artikelbeispiel wird der spezifische Co...

Zen Coding Einfaches und schnelles HTML-Schreiben

Zen-Codierung Es ist ein Texteditor-Plugin. In ei...

Beispielcode zum Konvertieren des Mysql-Abfrageergebnissatzes in JSON-Daten

Mysql konvertiert Abfrageergebnissatz in JSON-Dat...

So fahren Sie nginx herunter/starten es neu

Schließung Dienst Nginx stoppen systemctl stoppt ...

Detaillierte Installationsanleitung für das Cloud-Server-Pagoda-Panel

Inhaltsverzeichnis 0x01. Installieren Sie das Pag...

Einführung in den B-Tree-Einfügeprozess

Im vorherigen Artikel https://www.jb51.net/articl...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...