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

Detaillierte Erläuterung der Methode zur Festlegung des MySQL-Zeichensatzes (Terminal-Zeichensatz)

Drei gängige Stilselektoren in HTML-CSS

Detaillierte Erläuterung der Methode zur Festlegung des MySQL-Zeichensatzes (Terminal-Zeichensatz)

Einrichten eines Docker-Proxys unter CentOS 7 (Konfiguration der Umgebungsvariablen des Systemd-Dienstes unter Linux)

VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)

Flammenanimation mit CSS3 umgesetzt

8 wichtige JavaScript-Codefragmente für Ihr Projekt

Drei Möglichkeiten zur Implementierung von Animationen in CSS3

W3C Tutorial (13): W3C WSDL Aktivitäten

Fügen Sie Ihrer Website mit Google Web Fonts unbegrenzt viele Schriftarten hinzu

Artikel empfehlen

So finden Sie die IP-Adresse von Raspberry Pi, wenn es ohne Bildschirm mit dem drahtlosen Netzwerk verbunden ist

CSS3 implementiert den Beispielcode der NES-Spielekonsole

So verwalten Sie Docker über die Benutzeroberfläche

Beispielcode für den dynamischen CSS-Ladebalkeneffekt

JavaScript implementiert Ziehen mit der Maus, um die Div-Größe anzupassen

So laden Sie die Kamera in HTML

Implementierung des Scroll-Snap-Scroll-Ereignisstopps und der Elementpositionserkennung in CSS

Detaillierte Erläuterung des CentOS 6.6-Quellcodes und der Installation des MySQL 5.7.18-Tutorials

Wartungsmethode für den Innodb-Systemtabellenbereich

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

mysql IS NULL mit Indexfallerklärung

Lernunterlagen zum Schreiben des ersten Vue-Programms

Tutorial zu HTML-Tabellen-Tags (34): Zeilenspannen-Attribut ROWSPAN