Explication détaillée des règles de calcul de la priorité CSS-tutoriel CSS-php.cn

Récemment, j'ai appris les règles de calcul de priorité CSS. Cet endroit a beaucoup de points de connaissances, et c'est très important. Cet article présente principalement les règles de calcul de priorité CSS. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et le donner à tout le monde. Soyez une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Le poids du CSS

1. Comment introduire le CSS

1 Sur l'élément node, utilisez l'attribut style

2. via le lien

3. La différence entre les trois façons d'introduire

dans la page via la balise de style

fichier index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

Copier après la connexion

Fichier body.css

    body {
        background: green;
    }

Copier après la connexion

1. La première méthode a une priorité plus élevée que les deux dernières, et n'a rien à voir avec l'ordre d'introduction si les balises de lien et de style sont placées dans l'en-tête. le corps, ou à la fin de la balise html, La page affichera toute en jaune

2. Les deuxième et troisième types sont des introductions horizontales. Les styles introduits plus tard écrasent les styles introduits auparavant. le corps

Ajustez la séquence des balises de lien et de style. Le lien est devant, la balise de style est à l'arrière, et la page apparaîtra en rouge. Au contraire, la page apparaîtra en vert

2. Comment obtenir des nœuds

1. id

2.class

3. Balise

4. Attribut

La valeur de l'identifiant doit être unique dans une page. , mais lorsque plusieurs identifiants identiques apparaissent, le style est valide pour tous les nœuds d'identification. La méthode d'utilisation est la suivante : # suivi de la valeur de l'identifiant du nœud

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>

Copier après la connexion

#id_p {
  color: red;
}

Copier après la connexion

. Les résultats montrent que le texte dans les deux. les paragraphes apparaissent en rouge

1. L'ID a un poids plus élevé que la classe et l'étiquette Lorsque l'identifiant, la classe et l'étiquette sont stylisés sur un nœud en même temps, le poids de l'identifiant est le plus élevé

2. Lorsque le même identifiant est stylisé via les balises de lien et de style, le style introduit ultérieurement écrase le style précédent

class

L'utilisation de la classe peut définir des styles pour plusieurs nœuds en même temps, et les classes peuvent être superposées. Comment utiliser. Suivi d'un seul nom de classe du nœud

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>

Copier après la connexion

.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

Copier après la connexion

À ce moment, le premier paragraphe apparaît en rouge et le deuxième paragraphe apparaît en vert

Ajuster le html

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

Copier après la connexion

Après avoir ajusté les positions de class-p et class-p-2, l'effet de rendu de la page reste inchangé. Remarque : Le rendu des styles de classe n'a rien à voir avec l'ordre d'utilisation des classes, mais est lié à l'ordre des paramètres de style de classe. Pour les styles de classe ayant le même poids, dans les paramètres de style, les paramètres de style ultérieurs remplacent le style précédent. paramètres

attributs

Vous pouvez également obtenir le style du nœud via les attributs du nœud

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>

Copier après la connexion

[title] {
  color: red;
}

Copier après la connexion

Le deuxième paragraphe a un attribut de titre, donc le deuxième paragraphe apparaît en rouge

Tag

Obtenir le nœud par nom de balise pour le paramètre de style

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>

Copier après la connexion

p {
  color: red;
}

Copier après la connexion

Tous les nœuds de balise p de la page sont rendus en rouge

Mixte

Les quatre méthodes ci-dessus peuvent être mélangées et utilisées pour styliser les nœuds correspondants. Les méthodes de combinaison incluent l'imbrication hiérarchique, la superposition de styles, l'association de nœuds, etc. Au final, celui qui aura le poids le plus élevé sera le résultat final.

3. Poids du style

Pour les quatre méthodes ci-dessus, pour un individu, l'identifiant est le plus élevé, la classe et l'attribut sont du même niveau (les styles suivants écrasent les styles précédents) , et l'étiquette est la plus basse.

Lorsque les quatre méthodes sont mélangées, le résultat pondéré prévaudra. Triez les identifiants, les classes, les attributs et les styles d'étiquettes qui existent sur le même nœud, et celui classé en premier sera l'effet de rendu final. Par exemple : Il existe plusieurs types de paramètres de style pour le nœud p. Tout d'abord, sélectionnez tous les styles avec des identifiants, y compris les styles imbriqués. Sous le même identifiant, triez un autre type de style

<body class="body">
  <p id="id_p">第一个段落</p>
</body>

Copier après la connexion

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

Copier après la connexion

Bien que les deux paramètres de style aient des identifiants et que l'effet vert soit défini après le rouge, mais en triant, vous pouvez obtenir le même #id_p, le précédent existe en .body, donc l'effet de rendu final est rouge

Quand il y a des styles de classe, des attributs et des balises, ils sont triés dans l'ordre, avec le même type ou le même style de poids (la classe et les attributs ont le même poids), le style le plus récent écrase le style précédent (en fonction du type, pas du nom), et celui classé en premier sera l'effet de rendu final.

Remarque :

1. L'imbrication, la superposition, >, +, etc. n'affecteront pas l'effet final.

2. :nth-child, :first-child, :last-child et autres pseudo-classes sont supérieures à la classe et aux attributs

4 !important

! le style est important. Un cas particulier dans , son poids est le plus élevé, supérieur à l'identifiant, à la classe, aux attributs, aux balises et aux attributs de style

<body class="body" style="background: red"></body>

Copier après la connexion

.body {
  background: green !important;
}

Copier après la connexion

L'effet de rendu de la page est vert. Mais lorsque les paramètres de style sont triés, celui avec le poids le plus élevé d'un autre type sera l'effet final sous le même type de style. Par exemple, sous la même classe et !important

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

Copier après la connexion

, l'ancien paramètre de style a une balise body, mais pas le second style, donc l'effet final est bleu

Explication

1. Essayez d'éviter d'utiliser !important. Parce que !important a le poids le plus élevé, des paramètres obligatoires seront effectués pour cet attribut du nœud Soyez prudent lorsque vous l'utilisez

2 Scénarios d'utilisation

Lors de l'introduction d'un. plug-in, définissez le plug-in Les styles sont fortement remplacés. Lors de l'introduction d'un plug-in, si vous ne souhaitez pas modifier le code de style dans le plug-in, vous pouvez utiliser !important pour forcer le remplacement des attributs de style dans le plug-in
pour forcer le remplacement du style en ligne. Pour les structures HTML générées automatiquement ou introduites dynamiquement avec des styles en ligne, vous pouvez utiliser !important pour forcer le remplacement des styles en ligne

Solutions de contournement

!important n'est pas recommandé dans de nombreux cas. Il existe une règle dans stylelint qui interdit l'utilisation de !important. Il existe une solution de contournement qui peut obtenir un effet similaire à !important` dans la plupart des cas

html

span">Un morceau de texte

css .body .p .span { couleur : rouge; } .span.span.span.span. span {/**Superposition de style personnel **/ color: green; }

Sans tenir compte du style et de l'identifiant en ligne, répéter et superposer son propre style plusieurs fois peut augmenter le poids de la classe et modifier le style.

Conditions d'utilisation :

1. Il n'y a pas d'attribut de style en ligne

2 Il n'y a pas de style d'identification

3. du style propre dépasse le nombre d'imbrications

Avantages : Pas besoin de considérer la relation hiérarchique DOM, réduisant l'imbrication hiérarchique

5.Résumé

Sur la base de la description ci-dessus, le calcul du poids suit essentiellement les règles suivantes :

1. Comparez par type, celui avec le poids de type le plus élevé sera affiché

2. un avec plus sera affiché ;

3. Même quantité, comparer dans l'ordre, ce dernier montre la suggestion d'utilisation de l'imbrication

L'utilisation de l'imbrication de style

. augmente le poids, mais reflète également certaines relations structurelles du DOM. Mais la nidification n’est pas obligatoire dans tous les cas.

L'imbrication est principalement utilisée pour les paramètres de style uniques au sein des blocs. Un certain style n'est valable que dans un certain bloc et peut être imbriqué.
Lorsque plusieurs pages sont développées en même temps, l'imbrication peut être utilisée pour éviter d'écraser les styles après la fusion.

Plus on utilise de nidification, mieux c'est. Plus il y a d'imbrication, plus le poids est important, mais en même temps, plus la consommation de performances de la page est importante. Il est recommandé d'utiliser l'héritage et la superposition de styles.

Recommandations associées :

Partager une analyse détaillée de la priorité CSS

problème de priorité CSS

Explication détaillée de CSS priorité_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!