sélecteur de classe
Les sélecteurs de classe vous permettent de styliser les styles indépendamment des éléments du document
Par exemple : .class{} (notez qu'il commence par un point, qui est le signe d'un sélecteur de classe, suivi du nom de l'attribut, les paramètres spécifiques sont entre accolades)
Prenons un exemple simple :
fichier html :
<div class="div"> php中文网 </div>
fichier css :
.div{color: cadetblue;
}De cette façon, des effets personnalisés peuvent être obtenus :
Nous l'avons également abordé auparavant, en utilisant le sélecteur de classe combiné avec le sélecteur d'élément. Ajoutez-en un autre ci-dessous :
<h1 class="div">php中文网</h1>
Nous allons maintenant modifier le fichier CSS comme suit :
h1.div{color: cadetblue;
}Comme ça Après avoir ajouté la description de l'élément devant le sélecteur de classe, ce .div ne fonctionnera que sur h1.
Regardons l'effet spécifique :
Ce dont nous allons parler ensuite, c'est du sélecteur multi-classe : .class.class{} Nous n'y avons pas touché auparavant. Regardons-le en écrivant : le fichier html répertorie plusieurs p champs. , C'est facile de comparer alors :
<p class="p1">php中文网</p> <p class="p2">php中文网</p> <p class="p3">php中文网</p>
le fichier css n'a pas de sélecteur pour modifier un paramètre, une couleur est bleue et noire, la deuxième taille de police est de 20px, le troisième style de police est en italique :
.p1{ color: cadetblue;
}.p2{ font-size: 20px;
}.p3{ font-style: italic;
}Ce qui suit est une capture d'écran de l'effet :
Nous allons maintenant utiliser le sélecteur multi-catégories :
Ici, il suffit d'ajouter le fichier css. Changez simplement p3 en .p1.p2. De plus, modifiez la troisième classe de balises p lorsque vous citez en html : css:
.p1.p2{ font-style: italic;
}html:
<p class="p1 p2">php中文网</p>
. Voici l'image du résultat :
Ici, nous voyons que le troisième paragraphe comporte des modifications sur la couleur de p1, la taille de la police de p2 et ses propres italiques. C'est l'application de sélecteurs multi-catégories.
