web-dev-qa-db-fra.com

Comprendre la priorité / spécificité du sélecteur CSS

J'aimerais comprendre comment les sélecteurs CSS fonctionnent avec les collisions de propriétés. Comment une propriété est-elle sélectionnée par rapport à une autre?

div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
}
<div id="my_id" class="my_class">hello</div>

Comment fonctionne la priorité du sélecteur?

htmlcsscss-selectors
36
vitto

Je vais juste jeter un lien vers la spécification CSS 2.1 elle-même, et comment les navigateurs sont supposés pour calculer la spécificité:

CSS 2.1 section 6.4. :

La spécificité d'un sélecteur est calculée comme suit:

  • compter 1 si la déclaration provient de est un attribut "style" plutôt qu'une règle avec un sélecteur, 0 sinon (= a) (En HTML, les valeurs de l'attribut "style" d'un élément sont des règles de feuille de style. Ces règles n'ont pas de sélecteurs, donc a = 1, b = 0, c = 0 et d = 0.)
  • compter le nombre d'attributs ID dans le sélecteur (= b)
  • compter le nombre d'autres attributs et pseudo-classes dans le sélecteur (= c)
  • compter le nombre de noms d'éléments et de pseudo-éléments dans le sélecteur (= d)
  • La spécificité est basée uniquement sur la forme du sélecteur. En particulier, un sélecteur de la forme "[id = p33]" est compté comme un sélecteur d'attribut (a = 0, b = 0, c = 1, d = 0), même si l'attribut id est défini comme un "ID "dans la DTD du document source.

La concaténation des quatre nombres a-b-c-d (dans un système numérique avec une grande base) donne la spécificité.

Si les spécificités sont égales, alors CSS 2.1 Section 6.4.1 entre en jeu:

  1. Enfin, trier par ordre spécifié: si deux déclarations ont le même poids, Origine et spécificité, cette dernière spécifiée l'emporte. Les déclarations dans les feuilles de style importées sont considérées comme étant antérieures à toute déclaration dans la feuille de style elle-même.

Notez que cela parle du moment où le style est défini, pas quand il est utilisé. Si les classes .a et .b ont la même spécificité, selon ce qui est défini en dernier dans la ou les feuilles de style gagne. <p class="a b">...</p> et <p class="b a">...</p> sera de style identique, basé sur l'ordre de définition de .a et .b.

52
Benn
  1. Élément
  2. Sélecteurs de classe
  3. Sélecteurs ID
  4. Styles en ligne
  5. !important

Dans l'ordre, 1 est la spécificité la plus faible et 5 est la plus élevée. https://youtu.be/NqDb9GfMXuo affichera les détails pour le faire une démonstration.

5
li bing zhao

Ce qui vous intéresse, c'est spécificité .

Firebug est un excellent outil pour aider à inspecter cela. Mais d'autres navigateurs ont également intégré des outils pour inspecter les règles CSS appliquées.

5
Jason McCreary

Vous pouvez vous référer à la réponse complète ici documentation Mozilla

Commencez par les plus spécifiques: sélecteurs d'ID> sélecteurs de classe> sélecteurs de type (h1 normal, balise p, etc.)! Important gagne toujours, mais c'est considéré comme une mauvaise pratique.Voir le lien ci-dessus.

La meilleure façon est de l'expérimenter:

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS:

#id1{
    color: blue;
}

.class1{
    color: red;
}

#id2{
    color: yellow;
}

#id2{
    color : green;
}

body p#id3{
    color :orange;
}

body p{
    color : purple;
}

body{
    color : black;
}

h3::first-letter {
    color: #ff0000;

}

h3{
    color: CornflowerBlue ; 
}

h1{
    color: gray !important;
}

body h1#very-specific{
    color: red;
}

Voici un cas de test.

4
Vincentius Ronalto