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!
