Le sélecteur CSS est la base de la mise en page de notre page Web CSS. Que sont exactement les sélecteurs CSS et comment les utiliser raisonnablement ? Les sélecteurs peuvent être divisés en trois catégories. À l'exception de la première catégorie de sélecteur HTML, nous pouvons nommer les deux autres catégories nous-mêmes, en faisant attention à inclure la sémantique ou à ajouter les commentaires nécessaires pour rendre notre code plus clair et plus facile à lire. .
Sélecteur de balises HTML
Le sélecteur HTML est une balise HTML, telle que : DIV, TD, P, H1, etc. Si vous les définissez avec CSS, les propriétés de cette balise dans la page contrôlée par l'article CSS seront affichées selon votre définition.
Par exemple, si nous voulons que la couleur de H1 soit rouge, alors : H1 {couleur : rouge}. Nous apprenons ici une fonctionnalité du CSS, qui permet de définir plusieurs sélecteurs dans une règle. Tels que : H1, H2, TD {couleur : rouge}. Cette définition permet à tous les H1, H2 et TD d'être rouges. En utilisation spécifique, plusieurs attributs avec les mêmes paramètres peuvent être combinés et écrits pour réduire notre code.
Sélecteur de classe Sélecteur de classe
Il existe deux types de sélecteur de classe, l'un est appelé sélecteur de classe associé, qui est lié à une balise HTML. Sa syntaxe est tag.Classname {property:value}. Par exemple : nous voulons définir la couleur de certains H1, mais pas de tous, sur rouge. H1.redone {color: red} : le premier H1 est rouge, mais le second ne l'est pas.
Le deuxième type est un sélecteur de classe indépendant. Il peut être utilisé par n’importe quelle balise HTML. Sa syntaxe est la suivante Classname {property: value} Si nous avons la définition suivante blueone {color: blue} alors nous pouvons l'appliquer à différentes balises. Il est très évident que le sélecteur de classe nous donne plus de liberté et d'espace pour jouer.
Sélecteur d'ID Sélecteur d'ID
En fait, la fonction du sélecteur d’ID est très similaire à celle du sélecteur de classe indépendant. La différence est que leur syntaxe et leur utilisation sont différentes et qu'ils sont utiles à Javascript pour manipuler les éléments HTML. Dans notre mise en page, nous utilisons souvent des sélecteurs d'ID pour définir différentes zones structurelles.
Sa syntaxe est la suivante #IDname {property:value}. Supposons que nous ayons la définition suivante #yelowone {couleur : jaune}. Nous pouvons appliquer cette définition à n'importe quelle balise portant le même nom d'ID, telle que : text here. Vous pensez peut-être que puisque le sélecteur d'ID a la même fonction que le sélecteur de classe indépendant, pourquoi les deux existent-ils ? Les éléments HTML avec des identifiants peuvent être manipulés par JavaScript.