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

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!