Sélecteurs CSS

Un sélecteur CSS est un modèle utilisé pour correspondre aux éléments dans un document HTML. Les règles de style associées sont appliquées aux éléments correspondant au modèle du sélecteur.

Qu'est-ce qu'un sélecteur

Le sélecteur est l'un des aspects les plus importants de CSS, car il est utilisé pour sélectionner des éléments sur une page web afin de définir des styles. Vous pouvez définir un sélecteur de plusieurs manières.

Sélecteur générique

Sélecteur générique (utilisé*Les astérisques ou les astérisques représentent) un correspondant à chaque élément individuel de la page. Si l'élément cible contient d'autres conditions, le sélecteur générique peut être omis. Ce sélecteur est généralement utilisé pour supprimer les marge et remplissage par défaut des éléments pour un test rapide.

*　{
　　　　margin:　0;
　　　　padding:　0;
　　}

*Les règles de style à l'intérieur du sélecteur s'appliquent à chaque élément du document.

Sélecteurs de type d'élément

Les sélecteurs de type d'élément font correspondre chaque exemple d'élément dans l'arbre du document à son nom de type d'élément correspondant.

p {
　　　　color: blue;
　　}

pLes règles de style dans le sélecteur s'appliquent à<p>Chaque élément du document, et le rendent bleu, peu importe leur position dans l'arbre du document.

Sélecteurs d'ID

Les sélecteurs d'ID sont utilisés pouruniqueouuniqueDéfinir les règles de style pour l'élément.

La définition d'un sélecteur d'ID est un symbole de numero (#），suivi de la valeur d'ID.

#error　{
　　　　color:　red;}

Cette règle de style s'applique àidLes éléments pour lesquels l'attribut est défini comme apparaissant en rougeerror.

Sélecteurs de classe class

Les sélecteurs de classe peuvent être utilisés pour sélectionner les éléments qui ontclassTous les éléments HTML qui ont cette classe seront formatés selon les règles définies.

Par un point (.）sélectionne le sélecteur de classe suivant immédiatement après la valeur de classe définie.

.blue　{
　　　　color: blue;
　　　　　　}

Les règles de style ci-dessus s'appliquent àclassLe texte de chaque élément du document où l'attribut est défini comme apparaît en bleublueVous pouvez le rendre plus spécifique. Par exemple :

p.blue　{
　　　　color: blue;
　　　　}

Les règles de style dans le sélecteurp.blueSeulement<p>PourclassLes éléments pour lesquels l'attribut est défini comme apparaissent en bleublueet n'affecte pas d'autres paragraphes.

Sélecteurs de descendants

Lorsque vous devez sélectionner un élément qui est un descendant d'un autre élément, vous pouvez utiliser ces sélecteurs. Par exemple, si vous ne souhaitez localiser que les points de repère contenus dans la liste non ordonnée, sans localiser tous les éléments de repère.

ul.menu　li　a　{
　　　　text-decoration:　none;
　　　　}
h1　em　{
　　　　color:　green;
　　　　}

Règles de style à l'intérieur du sélecteurul.menu li aseulement applicable<a>Contenant des éléments avec la classeListe non ordonnéecontient ceux qui sont des éléments ancre.menuet n'ont pas d'effet sur les autres liens dans le document. De même,h1 emLes règles de style à l'intérieur du sélecteur ne s'appliquent qu'à<em>Les éléments contenus dans<h1>.

Sélecteurs enfants

Les sélecteurs enfants ne peuvent être utilisés que pour sélectionner des éléments qui sont des éléments directs de certains éléments. Les sélecteurs enfants se composent de deux ou plusieurs sélecteurs, séparés par un grand crochets (c'est-à-dire>Séparés par des points-virgules. Par exemple, vous pouvez utiliser ces sélecteurs pour sélectionner l'élément de premier niveau d'une liste imbriquée ayant plusieurs niveaux.

ul　>　li　{
　　　　list-style:　square;
　　　　}
ul　>　li　ol　{
　　　　list-style:　none;
　　　　}

Règles de style à l'intérieur du sélecteurul > liseulement applicable<li>comme<ul>Les éléments qui sont des éléments directs des éléments et qui n'affectent pas d'autres éléments de la liste.

Sélecteur de frère adjacent

Les sélecteurs de同级 adjacents peuvent être utilisés pour sélectionner des éléments de同级. La syntaxe de ce sélecteur est similaire à : E1 + E2où E2sont les cibles du sélecteur.

h1 + pLes sélecteurs dans l'exemple suivant<p>uniquement<h1>et<p>Les éléments qui partagent le même parent dans l'arbre du document et<h1>qui suit<p>Les éléments avant l'élément<h1>Les paragraphes après le titre ne sont sélectionnés que si ils ont des règles de style associées.

h1　+　p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task　+　p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Sélecteur de frère général

Les sélecteurs de同级 général sont similaires aux sélecteurs de同级 adjacents (E1 + E2） est similaire, mais pas aussi strict. Les sélecteurs de同级 général sont composés de deux sélecteurs simples, qui sont séparés par un tiret oblique (〜）séparés par des caractères. Il peut être écrit ainsi : E1〜E2où E2sont les cibles du sélecteur.

Les sélecteurs dans l'exemple suivanth1 ∼ psera sélectionné<p>avant l'élément<h1>Tous les éléments où tous les éléments partagent le même parent dans l'arbre du document.

h1　∼ p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task ∼ p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Il y a encore plus de sélecteurs, tels que les sélecteurs d'attribut, les pseudo-classes, les pseudo-éléments. Nous en discuterons dans les prochaines sections.

Sélecteurs groupés

Les sélecteurs multiples dans une feuille de style partagent généralement les mêmes déclarations de règles de style. Vous pouvez les regrouper en une liste séparée par des virgules pour réduire au maximum le code dans la feuille de style. Cela peut également éviter que vous ne répétiez les mêmes règles de style plusieurs fois.

h1　{
　　　　font-size:　36px;
　　　　font-weight: normal;
　　　}
h2　{
　　　　font-size:　28px;
　　　　font-weight: normal;
　　　}
h3　{
　　　　font-size:　22px;
　　　　font-weight: normal;
　　　}

Comme vous pouvez le voir dans l'exemple ci-dessus, les mêmes règles de stylefont-weight: normal;est partagée par le choixh1，h2eth3。Par conséquent, on peut les diviser en liste séparée par des virgules, comme suit :

h1, h2, h3　{font-weight: normal;}
h1　{font-size:　36px;}
h2　{font-size:　28px;}
h3　{font-size:　22px;}