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;
} 
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
