Sélecteurs de base CSS
En CSS, un sélecteur est un modèle utilisé pour sélectionner les éléments qui doivent être stylisés.
Le sélecteur d'attribut peut sélectionner des éléments en fonction de leurs attributs et valeurs d'attribut.
Trois types de sélecteurs de base : sélecteur de nom de balise, sélecteur de classe, sélecteur d'ID
Remarque : La manière d'écrire style=" " dans la balise doit être une façon d'introduire du CSS, pas un sélecteur, car le sélecteur n'est pas du tout utilisé.
1 : Sélecteur de nom de balise
Il existe de nombreuses balises dans un document HTML, telles que la balise p, la balise h1, etc. Pour que toutes les balises p du document utilisent le même style CSS, vous devez utiliser le sélecteur de balises.
html {color:black;}
h1 {color:blue;}
p2{color:silver;}
C'est , utilisez directement les balises HTML comme sélecteurs.
2 : Sélecteur de classe
Utilisation des sélecteurs de balises pour spécifier le même style CSS pour la même balise dans tout le document HTML. Mais dans l’application réelle, la même balise dans le document HTML sera utilisée à plusieurs reprises. Si vous souhaitez attribuer différents styles CSS à la même balise, vous devez utiliser des sélecteurs de classe.
<div class="test">Code de test</div>
.test {couleur:rouge;bordure:1px bleu solide;}
en html Dans le document, on ajoute class="xxx" à la balise d'ouverture de la balise pour contrôler le style (les balises non appariées comme input sont placées directement dans la balise, utilisez .xxx pour pointer). à cette balise. , pour contrôler cette balise, nous appelons cette façon de rechercher des balises en définissant des classes : sélecteurs de classes.
Cette façon de définir la classe est le sélecteur le plus couramment utilisé dans le développement front-end. Elle possède plusieurs fonctionnalités exceptionnelles : vous pouvez définir la même classe pour différentes balises, utilisant ainsi une seule commande CSS pour contrôler plusieurs balises, réduisant ainsi le nombre de balises. une grande partie du code est que la page est simple à modifier, facile à maintenir et facile à réviser ; deuxièmement, le personnel d'arrière-plan n'utilisera pas les paramètres pertinents de la classe et il n'est pas nécessaire d'interagir avec le personnel d'arrière-plan ; de plus, l'étiquette peut être modifiée dynamiquement via js, etc. Classname, modifiant ainsi le style de l'ensemble de l'étiquette, facilitant ainsi la mise en œuvre d'effets dynamiques frontaux.
3 : Sélecteur d'ID
Le sélecteur d'ID est similaire au sélecteur de classe, la différence est que le sélecteur d'ID L'appareil ne peut pas être réutilisé. Dans un document XHTML, un sélecteur d'ID ne peut attribuer son style CSS qu'à une seule balise.
<div id="test">Code test</div>
#test {couleur:rouge ; border:1px blue solid;}
Les éléments HTML avec des identifiants peuvent être manipulés par JavaScript. De plus, les identifiants sont également couramment utilisés par les développeurs back-end, les développeurs front-end devraient donc essayer de les avoir. aussi peu d'utilité.
