Maison > Article > interface Web > Les règles sous-jacentes au calcul de la priorité CSS

Les règles sous-jacentes au calcul de la priorité CSS

php中世界最好的语言original: 2018-03-21 16:53:241682parcourir

Cette fois, je vais vous apporter les règles sous-jacentes du calcul de la priorité CSS, quelles sont les notes des règles sous-jacentes du calcul de la priorité CSS, ce qui suit est un cas pratique, commençons jetez un oeil.

Récemment, j'ai appris les règles de calcul des priorités CSS. Il y a pas mal de points de connaissances ici et c'est très important, j'ajouterai donc quelques notes aujourd'hui.

Le poids du CSS

1.Comment introduire le CSS

1. node element Activé, utilisez l'attribut style

2. Introduisez les fichiers externes via le lien

3 Introduisez

dans la page via la balise de style La différence entre les trois introductions. méthodes

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>

fichier body.css

    body {
        background: green;
    }

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

2. Les deuxième et troisième types sont des introductions horizontales, suivies d'introductions. Le style écrase le style précédemment introduit et supprime la balise de style sur le corps

Ajuste l'ordre des balises de lien et de style. Le lien est à l'avant et la balise de style est à l'arrière. La page apparaîtra en rouge Au contraire, la page apparaîtra en vert

2. Comment obtenir le nœud <.>

1.id

2.class

3. Balise

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

. Les résultats montrent que le texte dans les deux paragraphes apparaît en rouge id

1. L'ID a un poids plus élevé que la classe et l'étiquette lorsque les styles id, class et label sont définis en même temps. a le poids le plus élevé

2. Via le lien et le style Lorsqu'une balise définit un style pour le même identifiant, le style introduit ultérieurement écrase le style précédent

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

#id_p {
  color: red;
}

L'utilisation d'une 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

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

Ajuster le html

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

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

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

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

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

Le deuxième paragraphe a un attribut de titre , donc le deuxième paragraphe s'affiche en rouge属性

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

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

[title] {
  color: red;
}

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

Mixage

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

p {
  color: red;
}

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é, et la classe et l'attribut sont au même niveau (le les styles ultérieurs écrasent les styles précédents). 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

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

存在class、属性和标签的样式时，依次排序，同类型或同权重（class和属性同权重）的样式，靠后的样式覆盖之前的样式（以类型为准，不以名称为准），最终排位第一者为最终呈现效果。

注意：

1.嵌套、叠加、>、 +等方式，不会影响最终效果。

2.:nth-child、:first-child、:last-child等伪类高于class和属性

四、!important

!important为样式中的特例，它的权重为最高，高于id、class、属性、标签以及style属性

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

.body {
  background: green !important;
}

页面呈现效果为green。但是当对样式设置进行排序时，仍然是同类型样式下，以另一类型权重高者为最终效果。例如

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

相同class及!important下，前一种样式设置存在body标签，后一种则没有，所以最终效果呈现blue

说明

1.尽量避免使用!important。因为!important权重最高，会对节点的该属性做强制性设置，在使用时要慎重

2.使用场景

引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码情况下，可通过!important对插件内的样式属性进行强制复写
对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，可以通过!important对行内样式进行强制复写

1.变通

!important在很多时候是不建议使用的，在stylelint中有一项规则即禁止使用!important。有一种变通的方式，可以在多数情况下实现类似!important`的效果

html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }

在不考虑行内样式和id的情况下，对自身样式进行重复叠加多次使用，可以增加class权重，对样式进行复写。

使用前提：

1.没有行内样式style属性

2.没有id样式

3.自身样式叠加次数多余嵌套个数

好处：不用考虑DOM层级关系，减少层级嵌套

五、总结

综合以上说明，权重的计算基本遵从以下规则：

1.按类型比对，类型权重高者显示；

2.同类型，按数量比对，多者显示；

3.同数量，按先后顺序比对，后者显示

嵌套的使用建议

样式嵌套使用，除了增加权重外，也体现了DOM的某种结构关系。但嵌套并不是在任何情况下都需要的。

嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效，可使用嵌套。
多个页面同时开发时，为避免合并后样式被覆盖，可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多，权重越大，但同时对页面的性能消耗也越大。建议使用继承和样式叠加。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus