Detaillierte Erläuterung der CSS-Attributselektoren

Legen Sie Stile für HTML-Elemente mit angegebenen Attributen fest. Sie können HTML-Elemente formatieren, die bestimmte Attribute haben, nicht nur die Klassen- und ID-Attribute. Dieser Artikel führt Sie hauptsächlich in das relevante Wissen über CSS-Attributselektoren ein. Ich hoffe, er kann Ihnen helfen.

Hinweis: IE7 und IE8 unterstützen Attributselektoren nur, wenn !DOCTYPE angegeben ist. In IE6 und niedriger wird die Attributauswahl nicht unterstützt.

Attributauswahl

Das folgende Beispiel formatiert alle Elemente mit dem Titelattribut:

[title]
{
color:red;
}

Attribut- und Wertselektoren

Das folgende Beispiel formatiert alle Elemente mit title="W3School":

[title=W3School]
{
border:5px solid blue;
}

Attribut- und Wertselektoren - mehrere Werte

Das folgende Beispiel formatiert alle Elemente, die ein Titelattribut mit einem angegebenen Wert enthalten. Gilt für durch Leerzeichen getrennte Attributwerte:

[title~=hello] { color:red; }

Das folgende Beispiel formatiert alle Elemente mit einem lang-Attribut, das den angegebenen Wert enthält. Gilt für durch Bindestriche getrennte Attributwerte:

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

Formular gestalten

Der Attributselektor ist nicht besonders nützlich beim Stylen von Formularen mit Klasse oder ID:

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

CSS Selector Reference Manual

Auswahl	Beschreibung
[attribute]	wird verwendet, um Elemente mit angegebenen Attributen auszuwählen.
[attribute=value]	wird verwendet für Auswahl Ein Element mit angegebenen Attributen und Werten.
[attribute~=value]	wird verwendet Wählt Elemente aus, deren Attributwerte das angegebene Vokabular enthalten.
[attribute|=value]	wird verwendet, um mit einem angegebenen Wert auszuwählen Ein Element, das mit einem Attributwert beginnt, der ein ganzes Wort sein muss.
[Attribut^=Wert]	Übereinstimmungsattribut Jedes Element, dessen Wert mit dem angegebenen Wert beginnt.
[attribute$=value]	Übereinstimmungsattribut Jedes Element, dessen Wert mit dem angegebenen Wert endet.
[Attribut*=Wert]	Übereinstimmungsattribut Jedes Element im Wert enthält den angegebenen Wert.

Verwandte Empfehlungen:

CSS-Attributselektor – Elemente basierend auf dem Namensattributwert von HTML-Elementen auswählen

CSS-Attribute von HTML-Elementen lesen und schreiben

jQuery-Einstellung CSS-Attributbeispielintroduction_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Attributselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!