ID -Selektor in CSS

Der ID -Selektor verwendete die ID -Attribute des Elements, um ein bestimmtes Element abzuzielen. Da ein HTML -Dokument eine eindeutige ID für ein Element haben sollte. Es ist sehr hilfreich in diesen Szenarien, in denen detaillierte Änderungen erforderlich sind. Wenn das Styling in ein einzelnes und bestimmtes Element implementiert werden muss, kann ein Typ -Selektor wie ID -Selektor verwendet werden.

Zum Beispiel, wenn Sie die Textfarbe von allen ändern müssen

Elemente dann können der Element -Selektor verwendet werden. Wenn Sie jedoch eine einzelne ansprechen müssen

Tag ist ein spezifischerer Selektor erforderlich, z. B. eine ID -Selektor.

Syntax

Der ID -Selektor wird mit dem # Zeichen beschrieben, gefolgt von der ID des Elements.

#Idname CSS -Eigenschaften

Regeln zur Implementierung des ID -Selektors

Es sind einige Regeln zu befolgen, um mit ID -Selektoren umzugehen.

Die erste Regel, die im Umgang mit ID -Selektor folgt, ist, dass es mindestens einen Charakter haben muss und nicht mit einer Nummer beginnen kann. Zum Beispiel:

Auf derselben Seite können mehrere HTML -Elemente nicht dasselbe haben Ausweis:

Wenn ein Element eine ID hat, muss es eindeutig sein:

Die letzte Regel ist, dass die ID -Name Und Eigentumswert muss das Selbe sein:

Betrachten Sie nun das folgende Beispiel mit dem ID "Stil":

ID -Selektor

Willkommen bei LinuxHint.com

zweiter Absatz

Im obigen Snippet eines der der

Elemente werden nach dem ID "Stil" gestaltet. Daher gelten die Eigenschaften von #Style nur dazu

Element wie in der folgenden Ausgabe gezeigt:

Der ID -Selektor kann für verschiedene HTML -Elemente wie Bilder, Absätze, Überschriften usw. verwendet werden.

CSS -Spezifität

Die CSS -Spezifität ist eine Reihe von Regeln, die der Webbrowser ermittelt, welche Eigenschaft am besten für ein Element geeignet ist. In CSS hat der ID -Selektor aufgrund seiner Einzigartigkeit die höchste Spezifität unter allen anderen Selektoren.

Zum Beispiel enthält der folgende Code zwei Stile, die auf das gleiche Element i zeigen i.e.


<

ID -Selektor

Willkommen bei LinuxHint.com

zweiter Absatz

Wenn der Klassenstil zuerst deklariert wird und der Absatz zuerst auf den „Klassen“ -Stil verweist, wendet der Browser das Styling des Klassenwählers an?

NEIN! Der Browser bestimmt die Spezifität dieser Selektoren. Da der ID -Selektor eine höhere Spezifität aufweist, wird die Eigenschaften unter Verwendung des ID -Selektors implementiert, wie in der Ausgabe gezeigt:

Abschluss:

Der CSS -ID -Selektor Verwendete das Zugriff auf das ID -Attribut, um einem bestimmten HTML -Element ein Styling zu verleihen. Die Einzigartigkeit macht den ID -Selektor vor anderen Selektoren vorrangig. Es hat die höchste Spezifität im Vergleich zu allen anderen Selektoren. Diese Beschreibung lieferte ein detailliertes Verständnis des ID-Selektors, der Syntax, einigen Regeln, die beim Umgang mit ID-Selektoren befolgt werden müssen, und schließlich lieferte sie die Anleitung zur CSS-Spezifität.