Verwendung des ID-Selektors in CSS

April 24, 2024

In den letzten Tutorials haben wir zwei der drei Arten von CSS-Regeln besprochen. Der erste Typ ist der HTML-Selektor, der auf dem Stil für das passende HTML-Tag basiert und diesen steuert. Der zweite Typ ist die Klassenauswahl, die wie ein generischer Stil funktioniert und auf jedes Element auf der Webseite angewendet werden kann.

Nun ist es an der Zeit, den dritten Typ der CSS-Regel zu diskutieren, der als ID-Selektor bezeichnet wird. Wie beim Klassenselektor kann der ID-Selektor auf jedes Element auf der Webseite angewendet werden. Es soll jedoch nur einmal auf einer Seite verwendet werden. Dies macht den ID-Selektor sehr nützlich für dynamisches HTML und JavaScript. Wenn Sie den ID-Selektor mehrmals auf einer Seite verwenden, sollten theoretisch die nachfolgenden vom Webbrowser ignoriert werden. Dies ist jedoch nicht immer der Fall. Es ist sehr schwierig, sich auf die Vorhersehbarkeit von Webbrowsern zu verlassen. Wenn Sie den ID-Selektor verwenden, achten Sie daher darauf, ihn nur einmal zu verwenden. Schauen wir uns ein Beispiel an.

Grundcode

. . .

Beispiel

. . .

ID-Auswahl

Innerhalb der Tags werden Sie feststellen, dass der ID-Selektor mit dem Hash-Symbol (#) beginnt und anschließend der Name, den Sie dem ID-Selektor zuweisen. Wie bei der Klassenauswahl können Sie einen beliebigen Namen verwenden. Am besten gibt der Name jedoch an, wofür die ID-Auswahl verwendet wird. Im Beispiel verwenden wir es, um einen speziellen Textabschnitt zu identifizieren.

{Eigentumswert;}

Ebenfalls innerhalb der Tags folgt auf den ID-Selektor ein oder mehrere Eigenschafts-Wert-Paare, die in geschweiften Klammern stehen. Diese Eigenschafts-Wert-Paare legen die Eigenschaften des Stils fest. In diesem Beispiel hat der Absatz mit der ID "special_text ID" einen rot gefärbten Text.

. . .

Wenn Sie den ID-Selektor im Hauptteil der Webseite verwenden, verwenden Sie das ID-Attribut im öffnenden HTML-Tag. Der Wert für das ID-Attribut ist der eindeutige Name, der dem ID-Selektor zugewiesen wurde, in diesem Fall "special_text". (id = "value") Auf diese Weise „verbindet“ der Selektor den Stil mit dem einen HTML-Tag, auf das Sie den Stil anwenden möchten. Im obigen Beispiel wird der ID-Selektor nur in einem platziert

Tag auf der Webseite. Alle anderen HTML-Tags auf der Webseite sollten nicht den ID-Selektor im Eröffnungs-Tag enthalten.

Video-Anleitungen: CSS Tutorial — Selectors, Element, Class and ID (3/13) (April 2024).

Verwendung des ID-Selektors in CSS, HTML, Arten von CSS-Regeln, Verwendung des ID-Selektors, des CSS-ID-Selektors

Vorherige Artikel

Nächster Artikel

In Verbindung Stehende Artikel

Computers

Ziele setzen für Ziele

April 2024

Kommen Ihre Ziele mit Zielen?? Diese Liste ist normalerweise eine Liste von Maßnahmen, die zur Verfolgung Ihrer primären Ziele ergriffen werden müssen. Die Liste wird als Ziel für das Erreichen eines...

Computers

Myst Masterpiece Edition

April 2024

Myst war ein klassisches Puzzlespiel, das Millionen begeisterte. Die Myst Masterpiece Edition bietet einen besseren Klang und ein Hinweissystem. Das ursprüngliche Myst-Spiel war für seine Zeit...