Der CSS-Selektor-Selektor ist die Grundlage für unser CSS-Webseitenlayout. Was genau sind CSS-Selektoren und wie setzt man sie sinnvoll ein? Mit Ausnahme der ersten Kategorie der HTML-Selektoren können wir die beiden anderen Kategorien selbst benennen. Achten Sie bei der Benennung auf die Einbeziehung der erforderlichen Kommentare, um unseren Code klarer und lesbarer zu machen .
HTML-Selektor-Tag-Selektor
Der HTML-Selektor ist ein HTML-Tag wie DIV, TD, P, H1 usw. Wenn Sie sie mit CSS definieren, werden die Eigenschaften dieses Tags auf der durch den CSS-Artikel gesteuerten Seite entsprechend Ihrer Definition angezeigt.
Wenn wir beispielsweise möchten, dass die Farbe von H1 rot ist, dann: H1 {color: red}. Hier lernen wir eine Funktion von CSS kennen, die mehrere Selektoren in einer Regel definieren kann. Zum Beispiel: H1, H2, TD {Farbe: Rot}. Diese Definition ermöglicht, dass alle H1, H2 und TD rot sind. Im konkreten Einsatz können mehrere Attribute mit gleichen Einstellungen kombiniert und geschrieben werden, um unseren Code zu reduzieren.
Klassenselektor Klassenselektor
Es gibt zwei Arten von Klassenselektoren, einer wird als verwandter Klassenselektor bezeichnet und bezieht sich auf ein HTML-Tag. Seine Syntax ist tag.Classname {property:value}. Zum Beispiel: Wir möchten die Farbe einiger, aber nicht aller H1 auf Rot setzen. H1.redone {color: red}: Das erste H1 ist rot, das zweite jedoch nicht.
Der zweite Typ ist ein unabhängiger Klassenselektor. Es kann von jedem HTML-Tag verwendet werden. Seine Syntax ist wie folgt. Wenn wir die folgende Definition haben: blueone {color: blue}, können wir sie auf verschiedene Tags anwenden. Es ist ganz offensichtlich, dass uns die Klassenauswahl mehr Freiheit und Spielraum gibt.
ID-Selektor ID-Selektor
Tatsächlich ist die Funktion des ID-Selektors der des unabhängigen Klassenselektors sehr ähnlich. Der Unterschied besteht darin, dass ihre Syntax und Verwendung unterschiedlich sind und sie für Javascript hilfreich sind, um HTML-Elemente zu bearbeiten. In unserem Layout verwenden wir häufig ID-Selektoren, um verschiedene Strukturbereiche zu definieren.
Die Syntax lautet wie folgt: #IDname {property:value}. Angenommen, wir haben die folgende Definition #yelowone {color: yellow}. Wir können diese Definition auf jedes Tag mit demselben ID-Namen anwenden, z. B.: Text hier. Sie denken vielleicht, dass beide vorhanden sind, da der ID-Selektor dieselbe Funktion wie der unabhängige Klassenselektor hat. HTML-Elemente mit IDs können von JavaScript manipuliert werden.