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; }
hello
Comment fonctionne la priorité du sélecteur ?
Dans l'ordre, 1 est la spécificité la plus basse et 5 est la spécificité la plus élevée.https://youtu.be/NqDb9GfMXuoLes détails de la démo seront affichés.
J'ajouterai un lien vers la spécification CSS 2.1 elle-même et comment les navigateursdevraientcalculer la spécificité :
CSS 2.1 Section 6.4.3:
Si les propriétés sont les mêmes, alorsCSS 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 le même style que
的样式相同,基于...
.a
和.b
, basé sur...
. a et
.b
.