Lösen Sie das Matching-Problem in CSS

Problembeschreibung

Wie wir alle wissen, wird beim Schreiben von CSS der entsprechende CSS-Code gemäß der Definition der Klasse oder der Definition der ID in HTML geschrieben. Definieren Sie verschiedene Stile für verschiedene Klassen. Um weniger Code schreiben zu können, verweisen die Benutzer natürlich auf die Übereinstimmung in CSS. Es gibt zwei Arten der Übereinstimmung: Fuzzy-Übereinstimmung und globale Übereinstimmung. Es gibt mehrere Möglichkeiten zum Abgleichen. Natürlich können Sie in HTML auch unterschiedliche Klassennamen oder den gleichen Klassennamen schreiben, um eine Übereinstimmung aller Stile zu erreichen. Manchmal kann der Klassenname jedoch nicht gleich geschrieben werden, was zu redundantem Code führt und die Komplexität des Codes erhöht. Um die Code-Redundanz zu reduzieren, wird eine Klassenübereinstimmung vorgenommen.

Lösung

Die erste Methode besteht darin, div zum Abgleichen zu verwenden, aber bei diesem Abgleichen wird für alle divs der gleiche Stil verwendet.

<div>
<div id='div1'/>
<div id='div2'/>    
</div>
// Wenn Sie den Stil aller darin enthaltenen Divs festlegen möchten, verwenden Sie > identifier.parent>div{
//Stil//
}

Die zweite Methode besteht darin, die durch die Klasse definierte Klasse abzugleichen. Diese Art der Übereinstimmung ist relativ genau und es gibt auch zwei Übereinstimmungsmethoden. Die erste Übereinstimmungsmethode besteht darin, zum Abgleichen das Pfeilsymbol zu verwenden. Zum Beispiel: [class^="icon-"]

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
[Klasse^="Symbol-"]{
Breite: 100px;
Höhe: 50px;
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</body>
</html>

Abbildung 2.1 Wirkung

Diese Übereinstimmungsmethode erfordert jedoch, dass dem Klassennamen ein Symbol- vorangestellt wird. Stehen vor dem Klassennamen andere Namen, wird der entsprechende Effekt nicht erzielt. Daher kann eine andere Matching-Methode verwendet werden. Das heißt, globale Übereinstimmung in Klassennamen. Zum Beispiel:

[class*="icon-"], beachten Sie, dass vor dem Symbol ein Leerzeichen steht. Und Sie müssen den Pfeil oben durch ein Sternchen ersetzen, damit eine globale Übereinstimmung des entsprechenden Klassennamens erreicht werden kann.

<!DOCTYPE html>

<html>

<Kopf>

<meta charset="UTF-8">

<title>Titel</title>

<Stil>

[Klasse*="Symbol-"]{

Breite: 100px;

Höhe: 50px;

Hintergrundfarbe: rot;

}

</Stil>

</Kopf>

<Text>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-t">555</div>

</body>

</html>

Abbildung 2.2 Wirkung

Auf diese Weise kann der Stil angepasst werden, solange der Klassenname „Icon“ enthält. Allerdings kann mit dieser Art der Übereinstimmung für den Klassennamen, der mit „icon“ beginnt, nicht der entsprechende Effekt erzielt werden, daher können Sie beide zusammen verwenden. Auf diese Weise kann der Matching-Effekt vollständig erzielt werden.

Abbildung 2.3 Wirkung

Es gibt zwei Möglichkeiten, den oben genannten Effekt zu erzielen. Die erste besteht darin, beide zusammen zu verwenden, und die zweite besteht darin, den Platz vor dem Symbol freizugeben.

<!DOCTYPE html>

<html>

<Kopf>

<meta charset="UTF-8">

<title>Titel</title>

<Stil>

[Klasse^="Symbol-"],[Klasse*="Symbol-"]{

Breite: 100px;

Höhe: 50px;

Hintergrundfarbe: rot;

}

</Stil>

</Kopf>

<Text>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-test">555</div>

</body>

</html>

Dadurch wird die Code-Redundanz reduziert.

Beim Schreiben von Code müssen Sie lernen, Code-Redundanz zu reduzieren, damit das Programm besser ausgeführt werden kann.

Dies ist das Ende dieses Artikels über Übereinstimmungsprobleme in CSS. Weitere relevante CSS-Übereinstimmungsinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Linux-Swap-Partition (ausführliche Erklärung)

>>: Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

$Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung$

Lösen Sie das Matching-Problem in CSS

Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung

Erläuterung der MySQL-Leistungsprüfung durch den Befehl „show processlist“

So ändern Sie die Standardübermittlungsmethode des Formulars

Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls

Beheben Sie den Fehler „ExtUtils/MakeMaker.pm kann in @INC nicht gefunden werden“

Beispielcode zur Implementierung fortlaufender Updates von Diensten mit Docker Swarm

HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud

Einführung in /etc/my.cnf-Parameter in MySQL 5.7

Beispiel zum Einbetten von H5 in die Webansicht des WeChat-Applets

Artikel empfehlen

Zwei Möglichkeiten zur Implementierung von Square Div mit CSS

So verwenden Sie Mixins in Vue

So implementieren Sie die JavaScript-Ausgabe der Fibonacci-Folge

Docker schließt die Implementierung des FTP-Dienstaufbaus mit einer Befehlszeile ab

Tabellenbezogene Anordnung und Javascript-Operationen table, tr, td

Tutorial zur Installation von Elasticsearch 7.6.2 in Docker

ElementUI implementiert kaskadierenden Selektor

So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker

ElementUI implementiert Beispielcode für Dropdown-Optionen und Mehrfachauswahlfelder

Zusammenfassung zweier Methoden zum Implementieren der Vue-Druckfunktion

So stellen Sie LNMP und phpMyAdmin in Docker bereit

js zur Realisierung eines einfachen Puzzlespiels

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

So implementieren Sie Dual-Machine-Master und Backup mit Nginx+Keepalived

JavaScript zum Erreichen der Produktabfragefunktion