Kann CSS auf Elemente mit einem beliebigen Attributwert abzielen?

CSS-Attributwert-Targeting leicht gemacht

Im Bereich der Gestaltung von Webseiten spielen CSS-Attribute eine entscheidende Rolle bei der Definition des Erscheinungsbilds und Verhaltens von HTML-Elementen. Während wir oft auf Situationen stoßen, in denen wir auf Elemente mit bestimmten Attributwerten abzielen müssen, was ist, wenn wir Stile auf Elemente mit einem beliebigen Attributsatz anwenden müssen, unabhängig von dessen Wert?

Kann CSS auf Elemente mit Attributen abzielen? von irgendeinem Wert?

Lassen Sie uns auf die Frage eingehen, ob es möglich ist, Elemente mit Attributen von beliebigem Wert auszuwählen. Stellen Sie sich den folgenden HTML-Code vor:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Das Ziel besteht darin, das erste und dritte Tags mit rotem Text mithilfe von CSS. Intuitiv könnten wir Folgendes versuchen:

a[rel=*]
{
  color: red;
}

Dieser Selektor funktioniert jedoch nicht. Glücklicherweise haben wir eine alternative Lösung.

Der universelle Attributselektor

Der universelle CSS-Attributselektor, gekennzeichnet durch eine einzelne eckige Klammer ([ ]), gleicht jedes Element mit dem angegebenen Attributsatz ab. unabhängig von seinem Wert. Für unseren Zweck können wir Folgendes verwenden:

a[rel]
{
  color: red;
}

Dieser Selektor zielt erfolgreich auf alle Tags mit einem rel-Attribut, wobei die rote Farbe auf den gewünschten Text angewendet wird.

Umgang mit leeren Attributwerten

In einigen Fällen müssen wir möglicherweise zwischen leeren und nicht leeren Attributwerten unterscheiden. Hier bietet sich die Pseudoklasse :not() an. Mit :not() können wir Elemente mit leeren Attributwerten ausschließen, was zu einem präziseren Targeting führt.

a[rel]:not([rel=""])
{
  color: red;
}

Dieser erweiterte Selektor stellt sicher, dass nur die Tags mit nicht leeren rel-Attributen werden von unseren Stiländerungen betroffen sein.

So, da haben Sie es. Mit der universellen CSS-Attributauswahl können Sie mühelos auf Elemente mit jedem definierten Attribut abzielen, wodurch Ihre Stile vielseitiger und anpassungsfähiger werden.

Das obige ist der detaillierte Inhalt vonKann CSS auf Elemente mit einem beliebigen Attributwert abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!