Maison > Article > interface Web > Explication détaillée de l'utilisation des sélecteurs d'attributs CSS (tutoriel d'introduction CSS)
Explication détaillée de l'utilisation des sélecteurs d'attributs CSS (tutoriel d'introduction CSS)
- (*-*)浩original
- 2019-11-26 13:38:133029parcourir
Définit les styles pour les éléments HTML avec les attributs spécifiés. (Apprentissage recommandé : Tutoriel d'introduction CSS)
Vous pouvez définir des styles pour les éléments HTML avec des attributs spécifiés, pas seulement des attributs de classe et d'identifiant.
Remarque : IE7 et IE8 ne prennent en charge les sélecteurs d'attributs que lorsque !DOCTYPE est spécifié. Dans IE6 et versions antérieures, la sélection d'attributs n'est pas prise en charge.
Sélecteur d'attribut
L'exemple suivant stylise tous les éléments avec l'attribut title :
[title]
{
color:red;
}Sélecteur d'attribut et de valeur
L'exemple suivant stylise tous les éléments avec title="W3School":
[title=hello]
{
border:5px solid blue;
}Sélecteurs d'attributs et de valeurs - valeurs multiples
L'exemple suivant définit les styles pour tous les éléments qui contiennent un attribut title avec une valeur spécifiée. S'applique aux valeurs d'attribut séparées par des espaces :
[title~=hello] { color:red; }L'exemple suivant stylise tous les éléments avec un attribut lang qui contient la valeur spécifiée. S'applique aux valeurs d'attribut séparées par des tirets :
[lang|=en] { color:red; }Styliser le formulaire
Le sélecteur d'attribut est spécial lors du style de formulaires sans classe ni identifiant Utile :
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!