Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)

Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)

Von: https://blog.csdn.net/qq_44761243/article/details/108227213

Was sind CSS-Selektoren? ? ?

1. Platzhalterzeichen (*)

Er kann auch als globaler Selektor oder universeller Selektor bezeichnet werden. Wie der Name schon sagt, definiert er die Stile aller Elemente. Wird häufig für einige Standardstile verwendet, z. B. um die Polsterung aller Elemente auf 2 px *{padding: 2px; } einzustellen, um die Seite schöner zu machen!

2. Tag-Selektor

Wird auch als Elementselektor bezeichnet, z. B. div, p, img usw.

3. Klassenauswahl

Ein Klassenname darf nicht mit einer Zahl beginnen und muss mit einem beginnen. Der Klassenname einer Seite kann wiederholt werden. Beispielsweise das Format des Klassennamens { }.

4. ID-Selektor

Es beginnt mit #. Derselbe ID-Name kann nicht auf einer Seite erscheinen.

5. Parallelwähler

Das heißt, mehrere Selektoren müssen denselben Stil festlegen, getrennt durch Kommas. Beispielsweise legt div,p{ color:red;} die Schriftfarbe des div-Tags und des p-Tags auf Rot fest.

6. Eltern-Kind-Selektor

In Bezug auf die Beziehung zwischen den Elementen ist es der Sohn, der sich verändert. Selektoren werden durch Leerzeichen getrennt. Beispielsweise legt div h1{ font-size:60px;} die Schriftgröße des h1-Tags innerhalb des div-Tags auf 60 Pixel fest. Hier muss sich h1 innerhalb des div befinden, um den Stil zu ändern.

Priorität:

ID-Selektor > Klassen-Selektor > Tag-Selektor > Platzhalter

Die Priorität muss nicht erklärt werden. Wer zuerst lädt und läuft, ist der Boss. ┗|`O′|┛

Es gibt noch viele weitere Selektoren, die ich hier nicht einzeln vorstellen werde, etwa Pseudoklassen-Selektoren und Pseudo-ID-Selektoren. Der Schlüssel ist, wenn Sie sie nicht merken können, merken Sie sich einfach die oben genannten, sie werden am häufigsten verwendet. Hier sind einige Beispiele zum leichteren Verständnis.

Benennungsregeln für Klassennamen und ID-Namen:

1. Beginnen Sie Ihren Namen nicht mit einer Zahl.

2. Der Klassenname und der ID-Name sollten aus der wörtlichen Bedeutung klar ersichtlich sein. Verwenden Sie kein Chinesisch. Wenn Sie nicht gut in Englisch sind, können Sie Pinyin verwenden. Wenn Sie nicht gut in Pinyin sind, vergessen Sie es, verwenden Sie es einfach nicht, hahahaha. [Ich mache mich nicht über dich lustig~]

Wenn Sie naiv oder faul sind, können Sie eins, zwei, drei machen. Sie werden verärgert sein, wenn Sie sie nach einer Weile wieder ansehen, weil Sie sich nicht erinnern können, wie 1, 2, 3 geschrieben werden o(≧口≦)o

Zusammenfassen

Damit ist dieser Artikel über die sechs wichtigen Selektoren in CSS (die Sie sich in drei Sekunden merken können) abgeschlossen. Weitere relevante Inhalte zu CSS-Selektoren finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Detaillierte Erläuterung des Prozesses der Zabbix-Überwachung von SQLServer

>>:  Zusammenfassung der Unterschiede zwischen globalen Objekten in Node.js und Browsern

Artikel empfehlen

Analyse des Problems der Hyper-V-Installation unter CentOS 8

CentOS 8 ist schon seit längerem auf dem Markt. A...

Verwendung des if-Urteils in HTML

Während der Django-Webentwicklung wird beim Schre...

So verwenden Sie Webstorm und Chrome zum Debuggen von Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Erstellen Sie ein n...

Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign

Zu Beginn dieses Artikels möchte ich die Fehler in...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24

MySQL ist das beliebteste relationale Datenbankma...

Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet

Wir alle wissen, dass die zugrunde liegende Daten...

So berechnen Sie die Bildrate FPS von Webanimationen

Inhaltsverzeichnis Standards für flüssige Animati...

Linux-Installation, MongoDB-Start und Lösung allgemeiner Probleme

MongoDB-Installationsprozess und Problemaufzeichn...

Eine vorläufige Studie zum Vue-Unit-Testing

Inhaltsverzeichnis Vorwort Warum Unit-Tests einfü...