Décodage de la priorité/spécificité du sélecteur CSS
P粉715274052
P粉715274052 2023-10-19 22:58:19
0
2
568

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 ?

P粉715274052
P粉715274052

répondre à tous(2)
P粉852114752

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.

P粉384366923

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. 🎜

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal