Décodage de la priorité/spécificité du sélecteur CSS

Question

Je veux comprendre comment les sélecteurs CSS gèrent les conflits de propriétés. Comment sélectionner un bien plutôt qu’un 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 ?

Answer 1

Dans l'ordre, 1 est la spécificité la plus basse et 5 est la spécificité la plus élevée. https://youtu.be/NqDb9GfMXuo Les détails de la démo seront affichés.

Answer 2

J'ajouterai un lien vers la spécification CSS 2.1 elle-même et comment les navigateurs devraient calculer la spécificité :

CSS 2.1 Section 6.4.3 :

Si les propriétés sont les mêmes, alors CSS 2.1 Section 6.4.1 entre en jeu :

Veuillez noter que ce qui est discuté ici est le moment où le style est défini, et non le moment où il est utilisé. Si les classes .a et .b ont la même spécificité, celle définie en dernier lieu dans la feuille de style est prioritaire.

....a 和 .b 具有相同的特异性，则以样式表中最后定义的那个为准。

...

和

...

的样式相同，基于.a和.b

a le même style que

...

, basé sur . a et .b. 🎜