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

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 ?

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/NqDb9GfMXuoLes 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 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.aet.bont 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
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!