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

JavaScript zum Erzielen eines Texterweiterungs- und -reduzierungseffekts

Lösen Sie das Matching-Problem in CSS

JavaScript zum Erzielen eines Texterweiterungs- und -reduzierungseffekts

Wenn Sie Dateien in Centos7 sichern, fügen Sie der Sicherungsdatei das Sicherungsdatum hinzu

Wissen Sie, welche Möglichkeiten es gibt, in Vue Routen zu überspringen?

Über das Problem, dass nach der VMware-Installation keine virtuelle Netzwerkkarte vorhanden ist

Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen

Der gesamte Prozess der Installation von mysql5.7.22 unter der ARM64-Architektur

Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten

Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

Detaillierte Methode zur Verwendung von GoAccess zum Analysieren von Nginx-Protokollen

js, um einfache Lupeneffekte zu erzielen

Artikel empfehlen

Beheben Sie das Problem, dass Mysql5.7.17 unter Windows nicht installiert und gestartet werden kann

7 Fähigkeiten, die Webdesigner haben müssen

MySQL ersetzt das Zeitfeld (Jahr, Monat, Tag) durch unveränderte Stunden, Minuten und Sekunden. Beispielanalyse

Mybatis Paging-Plugin pageHelper - ausführliche Erklärung und einfaches Beispiel

Detaillierte Erklärung der Funktionen jedes Ports von Tomcat

Hinweise zum MySQL-Datenbank-Sicherungsprozess

Das neueste beliebte Skript Autojs Quellcode-Sharing

So blockieren und verbieten Sie Webcrawler im Nginx-Server

Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Eine detaillierte Einführung in die Betriebssystemebenen von Linux

Java importiert Daten aus Excel in MySQL

Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Linux-Dateisysteme erklärt: ext4 und darüber hinaus