CSS-Attribut-Selektoren-Detailliert

CSS 2 führte den Attributselektor ein.

Der Attributselektor kann Elemente basierend auf ihren Attributen und den Attributwerten auswählen.

Einfacher Attributselektor

Wenn Sie Elemente mit einem bestimmten Attribut auswählen möchten, egal welchen Wert das Attribut hat, können Sie den einfachen Attributselektor verwenden.

Beispiel 1

Wenn Sie alle Elemente mit dem Titel (title) rot machen möchten, können Sie schreiben:

*[title] {color:red;}

Probieren Sie es selbst aus

Beispiel 2

Ähnlich wie oben kann das Stil nur auf Anchor (a-Elemente) mit href-Attribut angewendet werden:

a[href] {color:red;}

Probieren Sie es selbst aus

Beispiel 3

Es kann auch nach mehreren Attributen ausgewählt werden, indem die Attributselektoren miteinander verknüpft werden.

Zum Beispiel, um den Text von HTML-Hyperlinks mit den Attributen href und title rot zu machen, könnte man dies so schreiben:

a[href][title] {color:red;}

Probieren Sie es selbst aus

Beispiel 4

Man kann einige kreative Methoden verwenden, um diese Eigenschaft zu nutzen.

Zum Beispiel, kann man alle Bilder mit dem Attribut alt stilisieren, um diese gültigen Bilder hervorzuheben:

img[alt] {border: 5px solid red;}

Probieren Sie es selbst aus

Hinweis:Dieser spezielle Fall ist besser geeignet, um Diagnosen zu erstellen als Design, d.h. um zu bestätigen, ob ein Bild tatsächlich gültig ist.

Beispiel 5: Verwenden Sie Attribut-Selektoren für XML-Dokumente

Attribut-Selektoren sind in XML-Dokumenten sehr nützlich, da das XML-Sprache vorschlägt, Elementnamen und Attributnamen nach der Verwendung der Elemente und Attribute zu spezifizieren.

Annehmen wir, dass wir einen XML-Dokument für die Beschreibung der Planeten des Sonnensystems entworfen haben. Wenn wir alle planet-Elemente mit dem Attribut moons auswählen und rot darstellen möchten, um mehr Aufmerksamkeit auf die Planeten mit moons zu lenken, könnte man dies so schreiben:

planet[moons] {color:red;}

Dies wird den Text des zweiten und dritten Elements im folgenden Markierungsausschnitt rot darstellen, aber der Text des ersten Elements ist nicht rot:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Zeigen Sie die Wirkung an

Nach spezifischen Attributwerten auswählen

Neben der Auswahl von Elementen mit bestimmten Attributen kann die Auswahl weiter eingegrenzt werden, um nur Elemente mit bestimmten Attributwerten auszuwählen.

Beispiel 1

Zum Beispiel, wenn man eine Hyperlink zu einer bestimmten Dokument auf dem Web-Server rot machen möchte, könnte man dies so schreiben:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Probieren Sie es selbst aus

Beispiel 2

Ähnlich wie bei einfachen Attribut-Selektoren können mehrere Attribut-Wert-Selektoren zusammengefügt werden, um einen Dokument auszuwählen.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Dies wird den Text der ersten Hyperlink in den folgenden Markierungen rot machen, aber der zweite oder dritte Link wird nicht betroffen:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Probieren Sie es selbst aus

Beispiel 3

Genauso kann das XML-Sprach auch mit diesem Verfahren Stile einstellen.

Lassen Sie uns nun nochmal zu dem Beispiel mit dem Planeten zurückkehren. Angenommen, Sie möchten nur die planet-Elemente auswählen, deren moons-Attributwert 1 ist:

planet[moons="1"] {color: red;}

Der obige Code macht den zweiten Element in den folgenden Markierungen rot, aber das erste und das dritte Element sind davon nicht betroffen:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Zeigen Sie die Wirkung an

Attribut und Attributwert müssen vollständig übereinstimmen

Bitte beachten Sie, dass dieses Format eine vollständige Übereinstimmung mit dem Attributwert erfordert.

Wenn der Attributwert eine durch Leerzeichen getrennte Wertliste enthält, könnte es zu Problemen bei der Übereinstimmung kommen.

Denken Sie daran, den folgenden Markenausschnitt zu betrachten:

<p class="important warning">Dieser Absatz ist eine sehr wichtige Warnung.</p>

Wenn es als p[class="important"] geschrieben wird, kann diese Regel keine Beispielmarkierung auswählen.

Um ein Element auf Basis eines spezifischen Attributwerts auszuwählen, muss dies so geschrieben werden:

p[class="important warning"] {color: red;}

Probieren Sie es selbst aus

Selektion basierend auf Teil-Attributwert

Wenn eine Auswahl auf Basis eines bestimmten Wortes aus der Liste der Attributwerte erforderlich ist, muss das Wellenzeichen (~) verwendet werden.

Angenommen, Sie möchten Elemente auswählen, deren class-Attribut "important" enthält, können Sie dies mit dem folgenden Selektor erreichen:

p[class~="important"] {color: red;}

Probieren Sie es selbst aus

Wenn das Wellenzeichen ignoriert wird, bedeutet das, dass eine vollständige Wertübereinstimmung erforderlich ist.

Unterschied zwischen Teil-Attribut-Selektor und Punkt-Notationsstil

Dieser Selektor ist äquivalent zu dem Punkt-Notationsstil, den wir in den Klasse-Selektoren diskutiert haben.

Das bedeutet, dass p.important und p[class="important"] beim Anwenden auf ein HTML-Dokument äquivalent sind.

Warum also den Attribut-Selektor "~=" haben? Weil er für jeden Attribut verwendet werden kann, nicht nur für class.

Zum Beispiel kann ein Dokument mit einer großen Anzahl von Bildern vorliegen, von denen nur einige tatsächlich Bilder sind. In diesem Fall kann ein auf das title-Dokument basierender Teil-Attribut-Selektor verwendet werden, um nur diese Bilder auszuwählen:

img[title~="Figure"] {border: 1px solid gray;}

Diese Regel wählt alle Bilder aus, deren title-Text "Figure" enthält. Bilder ohne title-Attribut oder solche, deren title-Attribut nicht "Figure" enthält, werden nicht ausgewählt.

Probieren Sie es selbst aus

Teilwertattributselektor

Ich stelle Ihnen nun ein weiteres fortgeschritteneres Selektormodul vor, das nach Abschluss von CSS2 veröffentlicht wurde und mehr Teile der Teileigenschaftsselektoren enthält. Nach den Normen sollte es "Teilwertattributselektor" genannt werden.

Viele moderne Browser unterstützen diese Selektoren, einschließlich IE7.

Nachstehend ist eine einfache Zusammenfassung dieser Selektoren:

Typ Beschreibung
[abc^="def"] Wählen Sie alle Elemente aus, deren abc-Attributwert mit "def" beginnt
[abc$="def"] Wählen Sie alle Elemente aus, deren abc-Attributwert mit "def" endet
[abc*="def"] Wählen Sie alle Elemente aus, deren abc-Attributwert den Unterstring "def" enthält

Man kann sich vorstellen, dass diese Selektoren viele Anwendungen haben.

Nehmen wir an, Sie möchten allen Links, die auf CodeW3C.com verweisen, Stile anwenden. Es ist nicht erforderlich, für alle diese Links eine Klasse zu spezifizieren und dann nach dieser Klasse Stile zu schreiben. Stattdessen müssen Sie nur die folgende Regel schreiben:

a[href*="codew3c.com"] {color: red;}

Probieren Sie es selbst aus

Hinweis:Jegliche Attribute können mit diesen Selektoren verwendet werden.

Spezifischer Attributselektor

Ich stelle Ihnen nun den spezifischen Attributselektor vor. Sehen Sie sich das folgende Beispiel an:

*[lang|="en"] {color: red;}

Diese Regel wählt alle Elemente mit dem Attribut lang, das gleich en ist oder mit en- beginnt. Daher werden die ersten drei Elemente im folgenden Beispiel ausgewählt, nicht jedoch die letzten beiden Elemente:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Probieren Sie es selbst aus

Im Allgemeinen kann [att|="val"] für jedes Attribut und seinen Wert verwendet werden.

Angenommen, in einem HTML-Dokument gibt es eine Reihe von Bildern, deren Dateinamen wie folgt geformt sind figure-1.jpg und figure-2.jpg。以下选择器可以匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

Probieren Sie es selbst aus

Natürlich, der häufigste Gebrauch dieses Attributselektors ist die Übereinstimmung mit Sprachwerten.

CSS-Selektoren-Referenzhandbuch

Selektor Beschreibung
[attribute] Wird verwendet, um Elemente auszuwählen, die mit einem angegebenen Attribut ausgestattet sind.
[attribute=value] Wird verwendet, um Elemente auszuwählen, die mit einem angegebenen Attribut und Wert ausgestattet sind.
[attribute~=value] Wird verwendet, um Elemente auszuwählen, die die angegebene Wörter im Attributwert enthalten.
[attribute|=value] Wird verwendet, um Elemente auszuwählen, die mit einem mit der angegebenen Wert beginnenden Attributwert ausgestattet sind, der ein ganzer Wort sein muss.
[attribute^=value] Passende Attribute-Werte, die mit der angegebenen Wert beginnen.
[attribute$=value] Passende Attribute-Werte, die mit der angegebenen Wert enden.
[attribute*=value] Passende Attribute-Werte, die die angegebene Wert enthalten.