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

Einführung in JavaScript-Array-Deduplizierungs- und -Flatteningfunktionen

Inhaltsverzeichnis 1. Array-Abflachung (auch als ...

MySQL 8.0.11 Installationshandbuch für Mac

MAC installiert mysql8.0, der spezifische Inhalt ...

So löschen Sie eine Eigenschaft eines Objekts in JavaScript

1. löschen delete ist die einzige wirkliche Mögli...

Bedeutung der Hintergrundfarbdeklaration beim Schreiben von Stilen

Wie der Titel schon sagt, kann andernfalls bei ein...

Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten

Inhaltsverzeichnis 1. Vue-Listener-Array 2. Situa...

Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls

Inhaltsverzeichnis Legen Sie beim Erstellen einer...

Detaillierte Erklärung zu Unique Constraints und NULL in MySQL

Vorwort Eine Anforderung, die ich zuvor zur Verei...

Stellen Sie IE8 so ein, dass Code im IE7-Stil verwendet wird

<meta http-equiv="x-ua-kompatibel" co...

So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie

Holen Sie sich die Anzahl der Verbindungen --- Ho...

Schritte zum Anpassen des Symbols in Vue

ant-design-vue passt die Verwendung von Ali Iconf...

Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen

Wenn Sie es wären, wie würden Sie es erreichen, w...

Bringen Sie Ihnen bei, wie Sie den Beobachtermodus in Javascript implementieren

Inhaltsverzeichnis Was ist das Beobachtermuster? ...