Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial)
Detaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial)
- (*-*)浩Original
- 2019-11-26 13:38:133080Durchsuche
Legt Stile für HTML-Elemente mit angegebenen Attributen fest. (Empfohlenes Lernen: CSS-Einführungs-Tutorial)
Sie können Stile für HTML-Elemente mit angegebenen Attributen festlegen, nicht nur mit Klassen- und ID-Attributen.
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 Wertauswahl
Das folgende Beispiel formatiert alle Elemente mit title="W3School":
[title=hello]
{
border:5px solid blue;
}Attribut- und Wertselektoren – mehrere Werte
Das folgende Beispiel legt Stile fest für 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; }Formatierung des Formulars
Der Attributselektor ist speziell beim Formatieren von Formularen ohne Klasse oder ID. Nützlich:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!