Guide détaillé des sélecteurs CSS et exemples de code

Que sont les sélecteurs CSS ?

Les sélecteurs CSS sont utilisés pour sélectionner les éléments HTML à styliser. Les sélecteurs CSS sélectionnent les éléments HTML en fonction de leur identifiant, de leur classe ou de leurs attributs.

sélecteur de base

Sélecteur universel :

*Le symbole est utilisé pour sélectionner tous les éléments de la page. La plupart des développeurs voudront réinitialiser les marges et le remplissage à 0 afin d'éliminer les marges et le remplissage fournis par défaut par le navigateur. Cela permet de maintenir la cohérence entre les navigateurs lors de la visite d’un site Web.

grammaire:

*{
    
    
      // 设置元素样式
 }

Exemple HTML :

<body>
<h1>通用选择器示例</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

Exemple CSS :

*{
    
    
  background: black;
  color: white;
  font-family: 'Poppins';
}

h1{
    
    
  text-align: center;
}

Sélecteur de classe :

Les sélecteurs de classe sont utilisés pour sélectionner tous les éléments appartenant à un attribut de classe spécifique. Afin de sélectionner des éléments avec une classe spécifique, utilisez le point (.) représentant le nom de la classe, c'est-à-dire qu'il correspondra aux éléments HTML en fonction du contenu de l'attribut class.

grammaire:

.class {
    
    
    // CSS属性
}

Exemple HTML :

<body>
<div class="intro">
  <p>My name is Donald.</p>
  <p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p class="intro">My best friend is Mickey.</p>
</body>

Exemple CSS :

.intro{
    
    
  background: skyblue;
}

Sélecteur d'identifiant :

Le sélecteur id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique. L'identifiant de l'élément dans la page est unique, le sélecteur d'identifiant est donc utilisé pour sélectionner un élément unique ! Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#) suivi de l'identifiant de l'élément.

grammaire:

#idname {
    
    
  // 样式属性
}

Exemple HTML :

<body>
  <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

Exemple CSS :

#paragraph{
    
    
  background: skyblue;
}

Sélecteur de type :

Le sélecteur de type est parfois appelé sélecteur de nom de balise ou sélecteur d'élément car il sélectionne les balises/éléments HTML dans le document.

grammaire:

element{
    
    
// 设置元素样式
}

Exemple HTML :

<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>

Exemple CSS :

span{
    
    
  background: skyblue;
}

sélecteur de groupe

Les sélecteurs de regroupement CSS sont utilisés pour sélectionner plusieurs éléments et les styliser ensemble. Cela réduit le code et le travail supplémentaire requis pour déclarer des styles communs pour chaque élément. Pour regrouper des sélecteurs, séparez chaque sélecteur par une virgule.

grammaire:

element, element{
    
    
// 设置元素样式
}

Exemple HTML :

<body>
<h1>分组选择器示例</h1>
<p>示例CSS选择器。</p> 
<h4>示例CSS选择器分组。</h4> 
</body>

Exemple CSS :

h1{
    
    
  text-align: center;
}

p,h4{
    
    
  background: skyblue;
}

Combineur

Les combinateurs sont utilisés pour expliquer les relations entre les sélecteurs. Il existe quatre combinateurs différents en CSS :

Sélecteur de descendant (espace)
Sélecteur d'enfant (>)
Sélecteur de frères et sœurs adjacents (+)
Sélecteur universel de frères et sœurs (~)

Combinateur descendant (espace)

Les combinateurs descendants, généralement représentés par un espace (" "), combinent deux sélecteurs de telle sorte que si l'élément correspondant au deuxième sélecteur a un élément ancêtre (élément parent, élément parent) qui correspond à l'élément parent du premier sélecteur, le élément parent de l'élément parent, etc.), les sélectionne.

grammaire:

selector1 selector2 {
    
    
  /* 属性声明 */
}

Exemple HTML :

<body>
<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
  <section><p>div中的段落3。</p></section>
</div>

<p>段落4。不在div中。</p>
<p>段落5。不在div中。</p>
</body>

Exemple CSS :

div p{
    
    
background: skyblue;
}

sous-combinateur(>)

Les sous-combineurs utilisent le signe supérieur à (>) comme séparateur entre les éléments. Il sélectionne les descendants directs de l'élément parent. Ce combinateur ne correspond qu'aux éléments enfants directs dans l'arborescence du document. Il est plus strict que le sélecteur descendant car le deuxième sélecteur ne sera sélectionné que si le premier sélecteur est son élément parent.

grammaire:

selector1 > selector2 
{
    
    
   // 样式属性
}

Exemple HTML :

<body>
<h1>子组合器示例</h1>

<p>子选择器（>）选择指定元素的所有子元素。</p>

<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
  <section>
    <!-- 不是子元素，但是后代元素 -->
    <p>div中的段落3（在section元素内）。</p>
  </section>
  <p>div中的段落4。</p>
</div>

<p>段落5。不在div中。</p>
<p>段落6。不在div中。</p>
</body>

Exemple CSS :

div>p{
    
    
  background: skyblue;
}

Combineur de frères adjacents (+)

Les combinateurs frères et sœurs adjacents utilisent le signe plus (+) comme séparateur entre les éléments. Le deuxième élément ne sera mis en correspondance que s'il suit immédiatement le premier élément et qu'ils sont tous deux enfants du même élément parent. Ce sélecteur frère sélectionne les éléments adjacents, ou nous pouvons dire, les éléments situés à côté de la balise spécifiée.

grammaire:

former_element + target_element 
{
    
    
   // 样式属性
}

Exemple HTML :

<body>

<h1>相邻兄弟选择器示例</h1>

<p>+选择器用于选择紧跟在另一个特定元素之后的元素。</p>

<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
</div>

<p>段落3。在div之后。</p>
<p>段落4。在div之后。</p>

<div>
  <p>div中的段落5。</p>
  <p>div中的段落6。</p>
</div>

<p>段落7。在div之后。</p>
<p>段落8。在div之后。</p>

</body>

Exemple CSS :

div + p {
    
    
  background: skyblue;
}

Combinateur universel de frères et sœurs (~)

Le combinateur universel de frères et sœurs utilise le tilde (~) comme séparateur entre les éléments. Il sélectionne les éléments qui suivent le premier élément sélecteur et sont tous des enfants du même élément parent. Il peut être utilisé pour sélectionner des groupes d’éléments ayant un élément parent commun.

grammaire:

former_element ~ target_element 
{
    
    
     // 样式属性
}

Exemple HTML :

<body>

<h1>通用兄弟组合器示例</h1>

<p>通用兄弟选择器（~）选择指定元素的所有下一个兄弟元素。</p>

<p>段落1。</p>

<div>
  <p>段落2。</p>
</div>

<p>段落3。</p>
<code>一些代码。</code>
<p>段落4。</p>

</body>

Exemple CSS :

div ~ p {
    
    
  background-color: skyblue;
}

Pseudo-sélecteur

Pseudo-classe :

Utilisez les deux points (:) lorsque l'état de l'élément change en raison de l'interaction de l'utilisateur.

grammaire:

selector:pseudo-class 
{
    
    
    // property: value;
}

Les pseudo-classes couramment utilisées comprennent :

:se concentrer
:requis
:vérifié
:désactivé
:flotter
:a visité
:actif

Ces pseudo-classes concernent la position des éléments dans l'arborescence du document :

:racine
:premier enfant
:dernier enfant
:fils unique
:ntième-enfant(n)
:ntième-dernier-enfant(n)
:non(sélecteur)

Pseudo-éléments :

Le double deux-points (::) est utilisé pour styliser une partie spécifique de l'élément sélectionné.

grammaire:

selector::pseudo-element 
{
    
    
  // property: value;
}

Les pseudo-éléments couramment utilisés incluent :

::après
::avant
::Première ligne
::première-lettre (:première-lettre)
::première ligne (:première ligne)
::bouton de sélection de fichier

sélecteur d'attribut

Les sélecteurs d'attributs CSS correspondent aux éléments en fonction de la présence ou de la valeur d'un attribut donné.

[attr] représente un élément avec le nom d'attribut attr.

[attr=value] représente un élément avec un nom d'attribut attr et une valeur exacte.

[attr~=value] représente un élément avec un nom d'attribut attr et une valeur qui est une liste de mots séparés par des espaces, dont l'un se trouve être valeur.

[attr|=value] signifie un élément avec un nom d'attribut attr et la valeur peut être exactement value, ou elle commence par value et est suivie d'un trait d'union. Il est couramment utilisé pour la correspondance des sous-codes de langue.

[attr^=value] représente un élément avec un nom d'attribut attr et une valeur préfixée (préfixée) par value.

[attr$=value] représente un élément avec un nom d'attribut attr et une valeur avec value comme suffixe (suffixe).

[attr*=value] représente un élément avec un nom d'attribut attr et une valeur qui contient au moins une occurrence de value.

[valeur de l'opérateur attr i] L'ajout de i (ou I) avant le crochet fermant provoque une comparaison des valeurs insensible à la casse (pour les caractères de la plage ASCII).