Stilregelauswahl
- HTML-Selektor
ist das als Selektor verwendete HTML-Tag, sodass auf allen Webseiten, auf denen CSS angewendet wird, alle HTML-Tags gemäß den definierten Anweisungen angezeigt werden
Klassenselektor
- Um jedes durch ein HTML-Tag erstellte Webseitenelement in mehrere Kategorien zu unterteilen, legen Sie die Klasse dieses HTML-Tags auf unterschiedliche Werte fest:
Zum Beispiel:
p1 p2 p3
|
| Der Stil ist wie folgt definiert: |
Hinweis: Wenn der Selektor in definiert ist Das Stylesheet, direkt gefolgt vom Klassennamen (.), gilt diese Stilregel für alle HTML-Tags mit class=diesem Klassennamen. Das heißt, der Klassenselektor ist in zwei Kategorien unterteilt:
-
-
Zugehöriger Klassenselektor: HTML-Tag-Name (für dasselbe Element können verschiedene Regeln definiert werden).
Unabhängiger Klassenselektor: .Klassenname (die gleichen Stilregeln können für verschiedene Elemente definiert werden).
ID-Selektor Das ID-Attribut wird verwendet, um ein bestimmtes HTML-Element zu definieren. Nur ein Element in einer Webseitendatei kann einen bestimmten ID-Wert verwenden.
Auf der Webseite:
Text hier
|
| Der Stil ist wie folgt definiert:
|
Assoziative Selektoren beziehen sich auf eine Zeichenfolge, die aus zwei oder mehr einzelnen Selektoren besteht, die durch ein Leerzeichen getrennt sind Zum Beispiel: p em {Hintergrund: gelb🎜>wobei „p em“ Es ist der Assoziationsselektor, Das bedeutet, dass der Hintergrund des Inhalts zwischen dem -Tag-Paar gelb ist und der Inhalt im -Tag-Paar nicht betroffen ist Hinweis: Regeln, die durch zugehörige Auswahlen definiert werden, haben eine höhere Priorität als Regeln, die durch einen einzelnen Selektor definiert werden.
常用的伪元素如下
| 元素名 |
作用 |
| A:active |
选中超链接时的状态 |
| A:hover |
光标移动到超链接上的状态 |
| A:link |
没有任何动作时的状态 |
| A:visited |
访问过的超链接状态 |
| P:first-line |
段落中的第一行文本 |
| P:first-letter |
段落中的第一个字母 |
Kombinierte Selektoren Um wiederholte Deklarationen in Stylesheets zu reduzieren, können mehrere Selektoren in einer Stilregeldefinition kombiniert werden Beispiel: H1, H2, H3, H4, H5, H6, TD{color:red}.
Pseudoelementselektor bezieht sich auf eine Möglichkeit, verschiedene Zustände desselben HTML-Elements und eines Teils des darin enthaltenen Inhalts zu definieren
Das Format ist wie folgt: HTML-Element: Periodische Pseudoelement-Attribute: Wert🎜>
Der Klassenselektor kann mit Pseudoelementen verwendet werden: HTML-Element: Pseudoelement {Attribut: Wert}
