Maîtres sélecteurs CSS : le guide complet du débutant à l'expert-tutoriel CSS-php.cn

Maîtres sélecteurs CSS : le guide complet du débutant à l'expert

Barbara Streisand

Libérer： 2024-12-01 07:21:13

original

406 Les gens l'ont consulté

Master CSS Selectors: The Complete Beginner-to-Expert Guide

La puissance cachée des sélecteurs CSS : un guide pour les concepteurs Web

Introduction

CSS (Cascading Style Sheets) est la pierre angulaire de la conception Web moderne, permettant aux développeurs de contrôler l'apparence et la mise en page des sites Web. Au cœur du CSS se trouvent les sélecteurs, qui déterminent quels éléments d'une page Web sont stylés. Bien que les sélecteurs de base tels que div et h1 soient bien connus, la maîtrise des sélecteurs CSS avancés peut améliorer votre jeu de conception Web et vous aider à créer des sites Web époustouflants, efficaces et dynamiques.

Dans ce guide complet, nous plongerons dans les sélecteurs CSS, des bases aux techniques les plus avancées. Chaque section comprend des explications étape par étape et des exemples pratiques pour aider même les débutants à devenir des experts CSS.

Que sont les sélecteurs CSS ?

Les sélecteurs CSS sont des modèles utilisés pour cibler et styliser les éléments HTML. Considérez-les comme des instructions pour le navigateur, lui indiquant quels éléments de la page doivent recevoir des styles spécifiques.

Par exemple, dans cette règle CSS :

p {
  color: blue;
}

Copier après la connexion

Le p est le sélecteur, et il cible tous les

éléments, en appliquant la couleur : bleu ; style pour eux.

Les bases : types de sélecteurs CSS

1. Sélecteur universel

Le sélecteur universel (*) fait correspondre tous les éléments de la page.

* {
  margin: 0;
  padding: 0;
}

Copier après la connexion

Ceci est utile pour réinitialiser les styles de navigateur par défaut.

2. Sélecteur de type

Cible des balises HTML spécifiques comme div, h1 ou p.

h1 {
  font-size: 24px;
}

Copier après la connexion

3. Sélecteur de classe

Cible les éléments avec un attribut de classe spécifique.

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

Copier après la connexion

4. Sélecteur d'identification

Cible un élément avec un identifiant spécifique.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

Copier après la connexion

5. Sélecteur de regroupement

Permet de styliser plusieurs sélecteurs ensemble.

h1, h2, p {
  font-family: Arial, sans-serif;
}

Copier après la connexion

Passer aux sélecteurs intermédiaires

1. Sélecteur de descendants

Cible les éléments à l'intérieur d'un autre élément, quelle que soit leur profondeur d'imbrication.

div p {
  color: green;
}

Copier après la connexion

Cela cible tous les

balises à l'intérieur de

éléments.

2. Sélecteur d'enfants

Cible directement les enfants, en utilisant le > symbole.

ul > li {
  list-style-type: square;
}

Copier après la connexion

3. Sélecteur de frères et sœurs adjacents

Cible le premier élément suivant immédiatement un élément spécifié, à l'aide du symbole.

h1 + p {
  font-style: italic;
}

Copier après la connexion

4. Sélecteur général de frères et sœurs

Cible tous les frères et sœurs après un élément spécifié, en utilisant le symbole ~.

p {
  color: blue;
}

Copier après la connexion

Sélecteurs avancés : alimenter la conception Web moderne

1. Sélecteurs d'attributs

Les sélecteurs d'attributs ciblent les éléments en fonction de leurs attributs ou valeurs d'attribut.

Exemples :

Faire correspondre les éléments avec un attribut spécifique :

* {
  margin: 0;
  padding: 0;
}

Copier après la connexion

Faire correspondre les éléments avec une valeur d'attribut spécifique :

h1 {
  font-size: 24px;
}

Copier après la connexion

Faire correspondre les éléments dont l'attribut commence par une valeur :

<div>





<pre class="brush:php;toolbar:false">.highlight {
  background-color: yellow;
}

Copier après la connexion

2. Pseudo-classes

Les pseudo-classes définissent un état particulier d'un élément.

Pseudo-classes courantes :

:hover : applique des styles lorsque l'utilisateur survole un élément.

<div>





<pre class="brush:php;toolbar:false">#unique {
  color: red;
}

Copier après la connexion

:nth-child(n) : cible les éléments en fonction de leur position au sein d'un parent.

h1, h2, p {
  font-family: Arial, sans-serif;
}

Copier après la connexion

:not(selector) : exclut les éléments de la sélection.

div p {
  color: green;
}

Copier après la connexion

3. Pseudo-éléments

Les pseudo-éléments stylisent des parties spécifiques d'un élément.

Exemples :

::before : ajoute du contenu avant un élément.

ul > li {
  list-style-type: square;
}

Copier après la connexion

::after : ajoute du contenu après un élément.

h1 + p {
  font-style: italic;
}

Copier après la connexion

4. Combinateurs pour sélections complexes

Combinez les sélecteurs pour un ciblage puissant et précis.

Combinateurs descendants :

h1 ~ p {
  color: gray;
}

Copier après la connexion

Combinateurs enfants :

input[type] {
  border: 1px solid #000;
}

Copier après la connexion

Conseils d'utilisation des sélecteurs avancés

Gardez-le lisible : des sélecteurs trop complexes peuvent dérouter les collaborateurs.
Optimiser pour les performances : les navigateurs évaluent les sélecteurs de droite à gauche, évitez donc les modèles trop larges.
Testez régulièrement : assurez-vous que vos sélecteurs ciblent les éléments prévus dans différents navigateurs.

FAQ sur les sélecteurs CSS

Quelle est la différence entre les sélecteurs d’identifiant et de classe ?

Un identifiant est unique et s'applique à un élément, tandis que la classe peut être réutilisée pour plusieurs éléments.

Puis-je utiliser plusieurs pseudo-classes ensemble ?

Oui, vous pouvez enchaîner les pseudo-classes. Par exemple :

input[type="text"] {
  background-color: lightblue;
}

Copier après la connexion

Comment les sélecteurs d’attributs se comparent-ils aux classes ?

Les sélecteurs d'attributs sont plus dynamiques et peuvent cibler des éléments sans nécessiter d'attributs de classe ou d'identifiant supplémentaires.

Conclusion

Les sélecteurs CSS sont la base de toute conception Web. En les maîtrisant, vous pouvez transformer votre site Web en une expérience visuellement attrayante et conviviale. Commencez par les bases, explorez les sélecteurs intermédiaires et exploitez des techniques avancées pour faire passer vos compétences au niveau supérieur.

Expérimentez avec ces sélecteurs et voyez la différence qu'ils font dans vos projets !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!