Règles de priorité du sélecteur CSS3-tutoriel CSS-php.cn

Règles de priorité du sélecteur CSS3

WBOY

Libérer： 2024-02-19 14:51:06

original

742 Les gens l'ont consulté

Règles de priorité du sélecteur CSS3

Ordre de priorité du sélecteur CSS3

En CSS, la priorité d'un sélecteur détermine quelle règle sera appliquée à un élément. Lorsque plusieurs règles ont la même priorité, elles sont appliquées dans l'ordre dans lequel elles apparaissent. Pour les règles ayant des priorités différentes, CSS utilise un algorithme spécifique pour déterminer quelle règle est finalement appliquée. Ci-dessous, nous présenterons l'ordre des priorités des sélecteurs dans CSS3 et fournirons des exemples de code spécifiques.

En CSS, la priorité d'un sélecteur est déterminée par les facteurs suivants :

Styles en ligne : les styles en ligne sont des styles appliqués directement aux éléments HTML, obtenus en ajoutant l'attribut style. Il a la plus haute priorité.

Par exemple :

<div style="color: red;">This is a red text.</div>

Copier après la connexion

Sélecteurs d'ID : les sélecteurs d'ID correspondent à l'attribut id de l'élément et commencent par le symbole #.

Par exemple :

<div id="myDiv">This is my div.</div>

Copier après la connexion

#myDiv {
  color: blue;
}

Copier après la connexion

Sélecteurs de classe, sélecteurs d'attribut et sélecteurs de pseudo-classe (Sélecteurs de classe, sélecteurs d'attribut et sélecteurs de pseudo-classe) : ces sélecteurs correspondent aux éléments par nom de classe, attribut ou pseudo-classe. Les sélecteurs de classe commencent par le symbole ., les sélecteurs d'attributs sont entourés de crochets [] et les sélecteurs de pseudo-classe commencent par deux points :.

Par exemple :

<div class="myClass">This is my class.</div>

Copier après la connexion

.myClass {
  color: green;
}

[priority="high"] {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

Copier après la connexion

Sélecteurs d'éléments et sélecteurs de pseudo-éléments : ces sélecteurs correspondent aux éléments par nom d'élément ou pseudo-élément. Les sélecteurs d'éléments utilisent directement le nom de l'élément et les sélecteurs de pseudo-éléments commencent par le symbole ::.

Par exemple :

<p>This is a paragraph.</p>

Copier après la connexion

p {
  font-family: Arial;
}

p::first-letter {
  font-size: 24px;
}

Copier après la connexion

Si plusieurs sélecteurs avec la même priorité apparaissent, l'ordre est spécifié en CSS3 : Feuille de style en ligne> Sélecteur d'ID> Sélecteur de classe, sélecteur d'attribut et sélecteur de pseudo-classe> .

En utilisation réelle, nous rencontrons souvent des conflits de sélecteurs. À ce stade, nous devons résoudre le conflit en fonction de la priorité du sélecteur. Voici un exemple :

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Selector Priority Example</title>
  <style>
    .myClass {
      color: blue;
    }

    #myDiv {
      color: red;
    }

    p {
      color: green;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    <p class="myClass">This is a paragraph inside a div.</p>
  </div>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, l'élément div a l'identifiant "myDiv", l'élément de paragraphe p a le nom de classe "myClass" et l'élément p est imbriqué dans l'élément div. Étant donné que la feuille de style en ligne a la priorité la plus élevée, la couleur de l'élément de paragraphe est rouge.

Résumé : L'ordre de priorité des sélecteurs dans CSS3 est feuille de style en ligne > sélecteur d'ID > sélecteur de classe, sélecteur d'attribut et sélecteur de pseudo-classe > sélecteur d'élément et sélecteur de pseudo-élément. Lors de l'écriture de styles CSS, nous devons prêter attention à la priorité du sélecteur pour garantir que le style est appliqué à l'élément comme prévu.

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!