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
Artikel empfehlen
Detaillierte Erläuterung der Kommentare zu gespeicherten MySQL-Prozeduren
Inhaltsverzeichnis 1. Gebrauchsanweisung 2. Vorbe...
Ein kurzer Vortrag über MySQL-Pivottabellen
Ich habe eine Produktteiletabelle wie diese: Teil...
Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert
Die in Baidu-Interviews gestellten Fragen müssen ...
Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack
Inhaltsverzeichnis 1. Einleitung 2. GitHub 3. Gru...
So fügen Sie in Linux stapelweise Dateipräfixe hinzu
Sie müssen „gt_“ vor den Dateinamen aller TXT-Dat...
Das obere feste Div kann auf einen halbtransparenten Effekt eingestellt werden
Code kopieren Der Code lautet wie folgt: <!DOC...
202 kostenlose, hochwertige XHTML-Vorlagen (1)
Hier präsentiert 123WORDPRESS.COM den ersten Teil...
MySQL-Implementierung für pessimistisches und optimistisches Sperren
Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....
CSS3 realisiert eine springende Ballanimation
Normalerweise besuche ich gerne die Sonderseiten ...
Detaillierte Erklärung der Rolle des Schlüssels in React
Inhaltsverzeichnis Frage: Wird die Farbe des Bere...
10 sehr gute CSS-Fähigkeiten sammeln und teilen
Hier können Sie durch geschickten Einsatz von CSS-...
Informationen zur Verarbeitung des adaptiven Layouts (mit Float und negativem Rand)
Adaptives Layout wird in praktischen Anwendungen i...
MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode
MySQL-Sequenz AUTO_INCREMENT ausführliche Erkläru...
JS implementiert einen einfachen TodoList-Effekt (Notizblock)
Das Notizblockprogramm wird mithilfe der drei wic...
Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr
Nach der ersten Installation von Wamp können alle...