En savoir plus sur la priorité et la spécificité du sélecteur CSS

Question

Je souhaite comprendre comment les sélecteurs CSS fonctionnent dans les conflits de propriétés. Comment un attribut est-il sélectionné par rapport à un autre ?

div {
  couleur de fond : rouge ;
}

div.ma_classe {
  couleur de fond : noir ;
}

div#mon_id {
  couleur de fond : bleu ;
}

corps div {
  couleur de fond : vert ;
}

corps>div {
  couleur de fond : orange ;
}

corps>div#mon_id {
  couleur de fond : rose ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="my_id" class="my_class">bonjour</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 plus élevée. https://youtu.be/NqDb9GfMXuoLes détails seront affichés pour démonstration.

Answer 2

Je vais simplement ajouter ici un lien vers la spécification CSS 2.1 elle-même et comment les navigateurs doivent calculer la spécificité :

CSS 2.1 Section 6.4.3 :

Si spécificités sont égales, CSS 2.1 Section 6.4.1 sera utilisée  :

Veuillez noter que cela est discuté lorsque le style est défini, et non lors de son utilisation. Si l'ordre de définition des classes .a和.b的特异性相等，则在样式表中最后定义的类将获胜。<p class="a b">...</p>和<p class="b a">...</p>将根据.a和.b est défini dans le même style.