CSS EigenschaftsSelektoren

CSS-Attributselektoren werden verwendet, um HTML-Elemente anhand ihrer Attribute oder Attributwerte auszuwählen.

Attributselektoren können dabei helfen, Elemente zu gestalten, ohne ihnen Klassen oder IDs hinzufügen zu müssen.

Hinweis:IE7 und IE8 erfordern eine Deklaration!DOCTYPEAttributselektoren werden erst ab IE7 unterstützt! IE6 und niedrigere Versionen unterstützen keine Attributselektoren.

Die folgenden sind gängige CSS-Attributselektoren:

1、[attribute]

Wählt alle Elemente mit einem angegebenen Attribut aus (unabhängig vom Attributwert).

/* 选择所有具有 `type` 属性的元素 */
[type] {
  border: 1px solid red;
}

2、[attribute="value"]

Wählt Elemente aus, deren angegebenes Attribut und Wert genau mit einem angegebenen Wert übereinstimmen.

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
  background-color: yellow;
}

3、[attribute~="value"]

Wählt Elemente aus, deren Attributwert ein angegebenes Wort enthält (eines aus einer durch Leerzeichen getrennten Wortliste).

/* 选择属性值中包含 `button` 的元素 */
[class~="button"] {
  font-weight: bold;
}

4、[attribute|="value"]

Wählt Elemente mit einem angegebenen Wert oder einem Attributwert aus, der mit dem angegebenen Wert beginnt und unmittelbar von einem Bindestrich - gefolgt wird; wird häufig für Sprachcodes verwendet.

/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {
  color: green;
}

5、[attribute^="value"]

Wählt Elemente aus, deren Attributwert mit dem angegebenen Wert beginnt.

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {
  text-decoration: none;
}

6. [attribute$="value"]

Wählt Elemente aus, deren Attributwert mit dem angegebenen Wert endet.

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {
  border: 2px solid blue;
}

7. [attribute*="value"]

Wählt Elemente aus, deren Attributwert den angegebenen Wert enthält.

/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
[title*="tutorial"] {
  font-style: italic;
}

Mit Attributselektoren können Sie Elemente einfach auswählen und basierend auf ihren Attributen bestimmte Stile anwenden, was die Flexibilität und Wartbarkeit erhöht.

Attributselektor

Das folgende Beispiel färbt alle Elemente, die ein title-Attribut enthalten, blau:

Attribut- und Wertselektoren

Das folgende Beispiel ändert den Rahmenstil des Elements mit title='example':

Attribut- und Wertselektoren - mehrere Werte

Nachfolgend ein Beispiel für die Formatierung von Elementen, deren title-Attribut einen bestimmten Wert enthält, wobei (~) verwendet wird, um Attribut und Wert zu trennen:

Nachfolgend ein Beispiel für die Formatierung von Elementen, deren lang-Attribut einen bestimmten Wert enthält, wobei (|) verwendet wird, um Attribut und Wert zu trennen:

Formularstile

Attributselektor-Stile müssen keine class- oder id-Formen verwenden: