Detaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial)-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial)

(*-*)浩

Freigeben： 2019-11-26 13:38:13

Original

3084 Leute haben es durchsucht

Detaillierte Erläuterung der Verwendung von CSS-Attributselektoren (CSS-Einführungs-Tutorial)

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;
}

Nach dem Login kopieren

Attribut- und Wertauswahl

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

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

Nach dem Login kopieren

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; }

Nach dem Login kopieren

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; }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!