communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

sélecteur de classe

Vous pouvez définir un sélecteur de classe par point (.) et une chaîne légale, par exemple :

.antzone

Le code ci-dessus est un sélecteur de classe, mais pour que le sélecteur de classe soit efficace, la classe correspondante doit être définie dans l'élément html. Le code est le suivant :

<div id="antzone">< /div>

L'exemple de code est le suivant :

<style type="text/css">
.antzone{
  width:100px;
  height:100px;
}
</style>
<div class="antzone"></div>

Afin de faciliter la lecture, le code ci-dessus a été simplifié. Notez que la valeur de l'attribut de classe ne peut pas être précédée d'un. point (.). Vous pouvez également appliquer plusieurs sélecteurs de classe au même élément. Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.a{
  color:red;
}
.b{
  font-weight:bold;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
</body>
</html>

La valeur de l'attribut de classe peut être séparée par des espaces pour chaque classe. Notez que vous ne pouvez pas ajouter de point devant.

Les sélecteurs de classe peuvent également être utilisés conjointement avec les sélecteurs d'éléments. Par exemple, il y a plusieurs éléments sur la page qui utilisent la classe "antzone" en même temps, mais parfois nous souhaitons cibler uniquement les éléments div dont la valeur de l'attribut de classe est antzone. Pour modifier le style, nous pouvons écrire comme ceci : 

div.antzone{
  color:blue;
}

Le code ci-dessus peut définir la couleur de police de l'élément div avec la valeur de l'attribut de classe antzone sur bleu.

Comme introduit dans le code ci-dessus, un élément peut avoir plusieurs noms de classes, séparés par des espaces. En fait, le sélecteur peut également connecter plusieurs classes. Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文网</title>
<style type="text/css">
.antzone{
  width:100px;
  height:100px;
  border:1px solid black;
}
.antzone.a{
  color:blue;
}
</style>
</head>
<body>
<div class="antzone a b">php中文网</div>
<div class="antzone b">php中文网</div>
</body>
</html>

Le. Le code ci-dessus peut rendre valides les éléments avec à la fois antzone et a classes.

Parfois plusieurs sélecteurs définissent le même attribut de style, comme suit :

.a{
  width:100px;
  height:100px;
}
.b{
  width:100px;
  height:100px;
  color:red;
}

Le code ci-dessus peut être modifié comme suit :

.a,.b{
  width:100px;
  height:100px;
}
.b{
  color:red;
}
Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>hp中文网</title> <style type="text/css"> .antzone{ width:100px; height:100px; border:1px solid black; } .antzone.a{ color:blue; } </style> </head> <body> <div class="antzone a b">hp中文网</div> <div class="antzone b">hp中文网</div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492873 joue