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

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Inhaltsverzeichnis 1. beforeunload-Ereignis 2. Er...

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

Einige MySQL-Tabellen können doppelte Datensätze ...

Drei Möglichkeiten zum Aktualisieren von Iframes

Code kopieren Der Code lautet wie folgt: <ifra...

Detaillierte Erläuterung häufig verwendeter Nginx-Umschreibregeln

Dieser Artikel enthält einige häufig verwendete U...

Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7

1. Überprüfen Sie die PHP-Version nach dem Aufruf...

Beispiele für die Verwendung von HTML-Marquee-Tags

Dieses Tag ist nicht Teil von HTML3.2 und unterstü...

React erhält den Eingabewert und übermittelt 2 Methodenbeispiele

Methode 1: Verwenden Sie das Zielereignisattribut...

Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien

Prozessstrukturdiagramm Nginx ist eine Multiproze...

Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent

In letzter Zeit muss ich im Projektverlauf häufig ...

CSS implementiert fünf gängige 2D-Transformationen

2D-Transformationen in CSS ermöglichen es uns, ei...

Vue + echart realisiert Doppelsäulendiagramm

In diesem Artikel wird der spezifische Code von v...

Das WeChat-Applet wählt die Bildsteuerung

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation

Mysql ist eine beliebte und einfach zu bedienende...

Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches

Heute bin ich beim Entwickeln auf eine Methode ge...