CSS Attributselektoren (Attributselektoren)

Attributselektoren setzen Styleregeln für HTML-Elemente mit spezifischen Attributen. Es kann Styleregeln für HTML-Elemente mit spezifischen Attributen gesetzt werden, nicht nur für class und id Attributen.

Erfahren Sie mehr über Attributselektoren

CSS Attributselektoren bieten eine einfache und mächtige Methode, um basierend auf bestimmtenAttribut oder Attributswertvoranstellen, um das Styleregel auf HTML-Elemente anzuwenden.

Sie können einen Attributselektor erstellen, indem Sie das Attribut (optional mit einem Wert) in eckige Klammern setzen. Sie können auch einElementtyp Selektor.

Die folgenden Abschnitte beschreiben die häufigsten Attributselektoren.

CSS [Attribute] Selektor

Dies ist die einfachste Form des Attributselektors, wenn das angegebene Attribut existiert, wird das Styleregel auf den Element angewendet. Zum Beispiel können wir die folgenden Styleregeln verwenden, um alle Elemente mit Attributen zu stylisieren:

[title] {}}
　　　　color: blue;
}

[title] Der Selector im obigen Beispiel passt auf alle Elemente mit dem Attribut title zusammen.

Sie können auch den Attributselector hinter dem Typenselektor platzieren, um den Suchbereich auf bestimmte HTML-Elemente zu beschränken, wie folgt:

abbr[title] {
　　　　color: red;
}

Der Selector abbr[title] passt nur aufElemente mit dem Attribut title, daher passen sie auf Abkürzungen zusammen, nicht aber auf diejenigen mit dem AttributAnkerElement title.

CSS [attribute="value"]-Selektor

Sie können den Operator = verwenden, um den Attributselector mit jedem Element zu verknüpfen, das den Attributwert mit dem angegebenen Wert vollständig übereinstimmt:

input[type="submit"] {
　　　　border:　1px solid green;
}

Der Selector im obigen Beispiel passt auf input Jegliches Element mit dem Attributwert submit.

CSS [attribute〜="value"]-Selektor

Sie können den Operator ~= verwenden, um den Attributselector mit dem Attribut zu verknüpfen, das Werte enthält, die durchdurch Leerzeichen getrenntJegliches Element der Werteliste entspricht, eines der angegebenen Werte ist gleich dem angegebenen Wert:

[class~="warning"] {
　　　　color: #fff;
　　　　background: #ff0;
}

Jegliches Element mit dem Attribut class, das Werte enthält, die durch Leerzeichen getrennt sind, von denen einer warning ist. Zum Beispiel passen die Elemente mit dem Class-Wert warning, alert warning usw. zusammen.

CSS [attribute |="value"]-Selektor

Sie können den Operator |= verwenden, um den Attributselector mit dem Attribut zu verknüpfen, das Werte enthält, die mit einem bestimmten Wert beginnendurch Bindestriche getrenntJegliches Element der Werteliste entspricht, das einem der angegebenen Werte entspricht:

[lang|=en] {
　　　　color: #fff;
　　　　background: blue;
}

Der Selector im obigen Beispiel passt auf diejenigen mitlangAlle Elemente mit dem Attribut, das einen Wert enthält, der mit en beginnt, egal ob nach dem Wert ein Bindestrich und weitere Zeichen folgen. Mit anderen Worten, seine Elemente passen auf das Attribut lang mit dem Wert en, en-US, en-GB usw., nicht aber US-en, GB-en.

CSS [attribute ^="value"]-Selektor

Sie können den Operator ^= verwenden, um den Attributselector mit dem Attributwertsimilarly, you can use the $= operator to select attribute valuesmitanfangendJegliches Element, das dem Muster entspricht. Es muss nicht ein vollständiges Wort sein.

a[href^="http://"] {
　　　　background: url("external.png")　100%　5background: url("pdf.png") 0-0% no
　　　　repeat;-right:　15px;
}

Der Selector im obigen Beispiel sucht nach allen externen Links und fügt ein kleines Symbol hinzu, das anzeigt, dass sie in einem neuen Tab oder Fenster geöffnet werden.

CSS [attribute $="value"]选择器

CSS [attribute $="value"] selectorsimilarly, you can use the $= operator to select attribute valuesmitbestimmten Wertendend

alle Elemente. Es muss nicht ein vollständiges Wort sein.
　　　　a[href$=".pdf"] {　5background: url("pdf.png") 0-0% no
　　　　repeat;-padding　20px;
}

left:Dieser Wähler im obigen Beispiel wählt

verknüpft alle Elemente, die auf PDF-Dokumente verweisen, und fügt einen kleinen PDF-Icon hinzu, um den Benutzern Hinweise auf die Links zu geben. *CSS [attribute

="value"] Wähler*Sie können den

= Operator macht den Eigenschaftswähler passend für alle Elemente, deren Attributwert den angegebenen Wert enthält.*[class
　　　　color: #fff;
　　　　background: #ff0;
}

Dieser Wähler im obigen Beispiel passt alle HTML-Elemente mit der Klasse value, die warning enthält. Zum Beispiel passen seine Elemente mit dem Classwert warning, alert warning, alert-warning oder alert_warning usw.

Formulare mit Eigenschaftswähler stilisieren

Eigenschaftswähler für nichtclassoder spezielle Stile besonders nützlichid：

input[type="text"], input[type="password"] {
　　　　width:　150px;
　　　　display: block;
　　　　margin-bottom:　10px;
　　　　background: #ff0;
}
input[type="submit"] {
　　　　padding:　2px　10px;
　　　　border:　1px fest #804040;
　　　　background: #ff8040;
}