Drei gängige Stilselektoren in HTML-CSS

1: Tag-Selektor

Der Tag-Selektor wird für alle Tags verwendet. Hier nehmen wir p als Beispiel, das heißt, alle Tags mit p haben diesen Stil.

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<styletype="text/css">
p{Schriftart:"宋体"; Farbe:#FF0000}
</Stil>
</Kopf>
<Text>
<pid="p1">Ich zeige jetzt den Tag-Selektor</p>
<pid="p2">Ich verwende auch den Tag-Selektor</p>
<h1>Ich werde durch keinen Selektor verändert</h1>
</body>
</html>

2: ID-Selektor . Beachten Sie, dass der ID-Selektor eindeutig ist, da nur id="yy" diesen Stil hat und die ID eines Elements auf einer Seite eindeutig sein muss. . . Sie wissen, dass der ID-Selektor mit # beginnt und wie folgt verwendet wird: id=""

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<styletype="text/css">
#yy{Schriftart:"Yoga"; Farbe:#FF0000}
</Stil>
</Kopf>
<Text>
<pid="yy">Ich zeige jetzt den ID-Selektor</p>
<pid="p">Ich werde durch den ID-Selektor nicht verändert</p>
<h1>Ich werde durch keinen Selektor verändert</h1>
</body>
</html>

3: Klassenselektor . Klassenselektoren beginnen mit . Setzen Sie einfach die Klasse des Elements auf „“, um diesen Stil anzuzeigen. Die Verwendung ist: class=„“

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<styletype="text/css">
.yy{Schriftart:"Standard"; Farbe:#FF0000}
</Stil>
</Kopf>
<Text>
<pclass="yy">Ich zeige jetzt den Klassenselektor</p>
<pclass="yy">Ich werde nicht durch den Klassenselektor verändert</p>
<h1>Ich werde durch keinen Selektor verändert</h1>
</body>
</html>

<<: Centos8.3, Docker-Bereitstellung, Springboot-Projekt, tatsächliche Fallanalyse

>>: CSS löst das Problem der Front-End-Bildverformung perfekt

Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann

Informationen zum grundlegenden Konfigurationstutorial der kostenlosen Installationsversion von MySQL5.7.17 unter Win10 (mit Bildern und Text)

Artikel

Drei gängige Stilselektoren in HTML-CSS

Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann

So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

So installieren Sie Jenkins auf CentOS 8

Detaillierte Erklärung der neuen CSS-Eigenschaft display:box

js zur Implementierung eines Web-Rechners

Freigabe der Schritte zum SVN-Dienstsicherungsvorgang

Dockers flexible Implementierung zum Aufbau einer PHP-Umgebung

Detaillierte Erklärung der atomaren DDL-Syntax von MySQL 8.0

Informationen zum grundlegenden Konfigurationstutorial der kostenlosen Installationsversion von MySQL5.7.17 unter Win10 (mit Bildern und Text)

Artikel empfehlen

VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration

Techniken zur Optimierung von MySQL-Paging-Abfragen

Warum ich Nginx als Backend-Server-Proxy empfehle (Gründeanalyse)

Installieren und konfigurieren Sie SSH in CentOS7

Docker-Installations-Tutorial zu RocketMQ (am ausführlichsten)

Detaillierte Erklärung generischer Fälle in TypeScript

Detaillierte Erklärung der MySQL-Grundoperationen (Teil 2)

Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer

Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL

Sieben Prinzipien eines guten Designers (1): Schriftdesign

2 Gründe, warum die HTML-CSS-Tag-Stileinstellung nicht funktioniert

CSS3-Textanimationseffekte

Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse

js-Methode zum Löschen eines Felds in einem Objekt

Xhtml-Sonderzeichensammlung