CSS -Attribut -Selektoren
- [Attribut] Selector
- [Attribut = "Wert"] Selector
- [Attribut ~ = "Wert"] Selector
- [Attribut | = "Wert"] Selector
- [Attribut^= "value"] Selector
- [Attribut $ = "value"] Selector
- [Attribut*= "Wert"] Selector
Jede dieser diese werden nachstehend ausführlich erklärt.
[Attribut] Selector
Zum Zwecke des Stylingelements mit einem bestimmten Attribut wird der [Attribut] -Sähler verwendet.
Syntax
Element [Attribut]Eigentumswert;
Oder,
[Attribut]Eigentumswert;
Beispiel
Angenommen, Sie möchten alle Elemente mit Attribut stylen Alt, Verwenden Sie dann den [Attribut] -Sähler auf folgende Weise.
Html
Dies ist eine Überschrift
Dies ist ein Absatz.
Im obigen Code haben wir zwei Elemente erstellt
Und
. Der
wurde eine Attributklasse zugewiesen, während die, die, die
Das Element wurde ein Attribut -Alt zugewiesen.
CSS
[Alt]Schriftstil: kursiv;
Verwenden Sie nun den [Attribut] -Auskörper. In diesem Fall, da nur die
Das Element hat das Alt -Attribut, daher wird die Stilregel nur auf dem Absatz angewendet.
Ausgang
Elemente mit ALT -Attribut wurden gestylt.
[Attribut = "Wert"] Selector
ATTTIBUTES hat einen Wert. Um ein Element mit einem bestimmten Attribut und Wert zu stylen, verwenden wir den Selektor von [Attribute = "Wert"].
Syntax
Element [Attribute = "value"]Eigentumswert;
Oder,
[Attribute = "value"]Eigentumswert;
Beispiel
Angenommen, Sie möchten einige Elemente mit einem bestimmten Attribut und Wert stylen. Folgen Sie dem folgenden Beispiel.
Html
Hier haben wir ein Eingabefeld sowie eine Schaltfläche erstellt. Beide Elemente haben ein Attribut nach der Namensklasse. Die Werte beider Klassenattribute sind jedoch unterschiedlich.
CSS
[class = "input"]Hintergrundfarbe: Pink;
Schriftgröße: 20px;
[class = "btn"]
Polsterung: 3px;
Grenze: 1PX Solid Black;
Im obigen Code verwenden wir den Selektor von [Attribute = "value"], um sowohl das Eingangsfeld als auch die Taste zu stylen.
Ausgang
Beide Elemente wurden erfolgreich stilvoll.
[Attribut ~ = "Wert"] Selector
Es gibt bestimmte Attribute, die eine Liste von Werten haben, die durch den Raum getrennt sind, zum Beispiel Class = "Hallo Welt". Um Elemente mit solchen Attributwerten zu stylen. Es stilft Elementen, deren Attributwert einem dieser Werte entspricht.
Syntax
Element [Attribut ~ = "value"]Eigentumswert;
Oder,
[Attribut ~ = "value"]Eigentumswert;
Beispiel
Das folgende Beispiel zeigt die Arbeit des ausgewählten Selektors.
Html
Dies ist eine Überschrift
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Im obigen Code haben wir drei Elemente definiert. Jedes dieser Elemente hat jedoch das gleiche Attribut, jedoch unterschiedliche Werte.
CSS
[Klasse ~ = "Kopf"]Farbe lila;
[Klasse ~ = "para"]
Schriftgröße: 20px;
Schriftstil: kursiv;
Mit dem Selektor von [Attribut ~ = "value"] stylen wir die Überschrift und Absätze. Wie Sie sehen können, dass der Attributwert von jedem
Element ist eine Liste von Werten, die durch den Raum getrennt sind. In beiden Werten existiert das Schlüsselwort „Para“. Daher werden die für den Attributwert „Para“ definierten Stilregeln auf beide Absätze angewendet.
Ausgang
Der Selektor [Attribut ~ = "Wert"] funktioniert ordnungsgemäß.
[Attribut | = "Wert"] Selector
Zum Zweck des Stylings von Elementen mit Attributen mit Werten, die durch Bindestrichter getrennt sind, wird der Selektor [Attribut | = "Wert"] verwendet.
Syntax
Element [Attribut | = "value"]Eigentumswert;
Oder,
[Attribut | = "value"]Eigentumswert;
Beispiel
Folgen Sie dem unten erwähnten Beispiel, um die Arbeit des [Attributs | = "value"] zu verstehen.
Html
Dies ist eine Überschrift
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Der
und der erste
Das Element hat einen Attributwert, der durch Bindestrichter getrennt ist, jedoch den Attributwert der letzten
Element wird nicht durch einen Bindestrich getrennt.
CSS
[Klasse | = "Linux"]Hintergrundfarbe: Bisque;
Schriftstil: kursiv;
Jetzt wendet dieser Selektor nur Stilregeln auf die Überschrift und den ersten Absatz an, da nur diese beiden Elemente einen Attributwert haben, der durch einen Bindestrich getrennt ist.
Ausgang
Die Stilregeln wurden an angewendet
und der erste
Element.
[Attribut^= "value"] Selector
Um Elemente mit Attributen mit einem bestimmten Startwert zu stylen. Der Wert ist nicht unbedingt das ganze Wort.
Syntax
Element [Attribut^= "value"]Eigentumswert;
Oder,
[Attribut^= "value"]Eigentumswert;
Beispiel
Wir werden das gleiche Beispiel verwenden, das im obigen Abschnitt verwendet wird, um das Konzept des Selektors [Attribut^= "Wert"] zu löschen.
Html
Dies ist eine Überschrift
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Beachten Sie, dass jedes der oben genannten Elemente einen Attributwert hat, der mit dem Wort Linux beginnt.
CSS
[class ^= "linux"]Hintergrundfarbe: Bisque;
Schriftstil: kursiv;
Jetzt wird dieser Selektor alle Elemente stylen, da jeder von ihnen den gleichen Startattributwert hat.
Ausgang
Der [Attribut ^= "value"] funktioniert ordnungsgemäß.
[Attribut $ = "value"] Selector
Um Elemente mit Attributen mit einem bestimmten Endwert zu stylen. Der Wert ist nicht unbedingt das ganze Wort.
Syntax
Element [Attribut $ = "value"]Eigentumswert;
Oder,
[Attribut $ = "value"]Eigentumswert;
Beispiel
Folgen Sie dem folgenden Beispiel, um die Funktionsweise dieses Attributauswählers zu verstehen.
Html
Etwas Text.Etwas Text.
Etwas Text.
Hier haben wir drei Divelemente erstellt. Den ersten beiden DIV -Elementen wurde ein Attributwert zugewiesen, der mit dem Schlüsselwort "Div" endet.
CSS
[Klasse $ = "div"]Hintergrundfarbe: Beige;
Polsterung: 10px;
Schriftgröße: 20px;
Schriftstil: kursiv;
Das [Attribut $ = "Wert"] wendet die oben genannten Regeln nur auf die ersten beiden Divelelemente an.
Ausgang
Die ersten beiden DIV -Elemente wurden unter Verwendung des Selektors [Attribut $ = „Wert] gestaltet.
[Attribut*= "Wert"] Selector
Um alle Elemente mit Attributwerten mit einem bestimmten Schlüsselwort zu stylen, wird der Selektor [Attribut *= "Wert"] verwendet.
Syntax
Element [Attribut *= "value"]Eigentumswert;
Oder,
[Attribut *= "value"]Eigentumswert;
Beispiel
Nehmen wir an, Sie möchten einige Elemente mit dem Selektor von [Attribut*= „Wert“] stylen möchten. Folgen Sie dem folgenden Code.
Html
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Wir haben zwei geschaffen
Elemente mit Attributwerten "para1" bzw. "para2".
CSS
[Klasse *= "ar"]Hintergrundfarbe: Bisque;
Schriftstil: kursiv;
Dieser Attribut -Selektor erkennt jeden Attributwert mit dem Schlüsselwort „AR“ und wendet die obigen Stilregeln für dieses Element an.
Ausgang
Der Selektor [Attribut*= "Wert"] funktioniert ordnungsgemäß.
Abschluss
Sie können HTML -Elemente stylen, die bestimmte Attribute oder Attributwerte haben. Es gibt insgesamt sieben CSS -Attribut -Selektoren, die: [Attribut] Selector, [Attribut = "Wert"], [Attribut ~ = "Wert"] Selector, [Attribut | = "value"] Selector, [Attribut ^= " Wert ”] Selector, [Attribut $ =" Wert] Selector und [Attribut *= "Wert"] Selector. Diese alle Selektoren erfüllen einen anderen Zweck, den wir in diesem Beitrag zusammen mit relevanten Beispielen ausführlich besprochen haben.