Wie kann ich CSS-Elemente mit Attributen beliebiger Werte gezielt ansprechen?

Targeting auf Elemente mit Attributen beliebiger Werte in CSS

In CSS ist es oft notwendig, Elemente basierend auf ihren Attributen anzusprechen. Während es unkompliziert ist, Elemente mit bestimmten Attributwerten auszuwählen, kann das Targeting von Elementen mit beliebigen Attributwerten eine größere Herausforderung darstellen.

Frage: Elemente mit beliebigen Attributen auswählen

Wie können wir? Zielelemente, die ein Attribut mit einem beliebigen Wert haben (außer wenn das Attribut dem Element nicht hinzugefügt wurde)? Beispielsweise möchten wir jedes Anker-Tag mit einem Wert für das Attribut „rel“ ansprechen.

Antwort: Verwendung des Attributselektors mit einem leeren Wert

Um dies zu erreichen Dazu können wir den Attributselektor mit einem leeren Wert verwenden. Die folgende CSS-Regel zielt auf alle Anker-Tags ab, für die ein „rel“-Attribut definiert ist:

a[rel] {
    color: red;
}

Diese Regel stimmt mit dem ersten und dritten Anker-Tag im folgenden HTML überein:

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

Update: Unterscheidung zwischen leeren und nicht leeren Werten

In bestimmten Fällen kann es notwendig sein, zwischen Elementen mit einem leeren Attribut zu unterscheiden Wert und solche mit einem nicht leeren Wert. Dazu können wir die CSS-Pseudoklasse „:not“ verwenden:

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

Diese Regel zielt nur auf Anker-Tags mit nicht leeren „rel“-Attributwerten ab.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Elemente mit Attributen beliebiger Werte gezielt ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!