quel est le poids CSS

Le poids CSS fait référence à la priorité du sélecteur CSS. Un style CSS avec une priorité plus élevée remplacera un style CSS avec une priorité inférieure. Plus la priorité est élevée, plus le poids est élevé, et vice versa. Le poids CSS est basé sur les règles de correspondance définies. Le navigateur détermine quelles valeurs d'attribut les éléments du DOM sont les plus pertinents grâce aux priorités définies, puis applique ces valeurs au DOM.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce que le poids CSS ?

Le poids CSS fait référence à la priorité du sélecteur CSS. Le style CSS avec une priorité élevée remplacera le style CSS avec la priorité la plus basse, qui prime. Plus le niveau est élevé, plus le poids est élevé, et vice versa.

Sélecteurs de base CSS6 :

a), sélecteur d'identifiant (#box{})
b), sélecteur de classe (.box{})
c), sélecteur d'attribut (a[href="http://www.xxx.com"])
d), sélecteur de pseudo-classe et de pseudo-objet (:hoevr{} et ::after{})
e ), sélecteur de type de balise (p{})
f), sélecteur de caractère générique (*{})

le poids CSS est basé sur les règles de correspondance définies et le navigateur passe Définir la priorité sur déterminer quelles valeurs d'attribut​​les éléments du DOM sont les plus pertinentes pour appliquer ces valeurs​​sur le DOM.

Une compréhension simple est qu'une certaine valeur d'attribut d'un DOM a plusieurs paramètres de style CSS, quelle que soit l'application ayant la priorité la plus élevée. De nombreux problèmes liés aux paramètres CSS qui ne prennent pas effet sont dus au fait qu'une priorité plus élevée est définie quelque part, ce qui empêche le style de prendre effet.

L'ordre de priorité est le suivant :

important > inline(style) > class(class) > :hover ,:focus...) | Sélection d'attribut [attr=''] > Pseudo-objet (:before,:after) > déterminer la priorité Drap de laine ?

Règles de calcul du poids CSS

Il existe certaines règles de calcul du poids CSS Selon la spécification CSS formulée par le w3c, les règles de calcul du poids CSS sont les suivantes :

a), calculez le nombre de sélecteurs d'identifiant dans le sélecteur

Un sélecteur d'identifiant est un a, et un a vaut 100

b), calculez le sélecteur de classe et les attributs dans le sélecteur Le nombre de sélecteurs et de sélecteurs de pseudo-classe

Un sélecteur de classe, un sélecteur d'attribut et un sélecteur de pseudo-classe est un b, et un b vaut 10

c), calculer le type de balise sélecteur et le nombre de sélecteurs de pseudo-objets

un sélecteur de type de balise, le sélecteur de pseudo-objet est un c, un c vaut 1

d), ignorer le sélecteur de caractère générique

Les sélecteurs génériques sont ignorés

L'image suivante est un exemple de poids de sélecteur CSS :

Si les poids des deux sélecteurs sont les mêmes, alors il peut sera jugé selon le "juste en principe", et le dernier sélecteur défini sera utilisé. Mais essayez d'éviter la situation où la priorité des sélecteurs est déterminée par l'ordre défini, car il est difficile de garantir que l'ordre défini ne sera pas perturbé lors d'une maintenance ultérieure.

Règles de base de priorité

1. Même poids : le sélecteur qui apparaît plus tard est la règle finale

S'il est dans une feuille de style externe , vous écrivez deux fois la même règle CSS, puis le sélecteur qui apparaît au premier plan a un faible poids, et votre style sélectionnera le style ultérieur :

#content h1 {  padding: 5px;
}
#content h1 {  padding: 10px;
}

Les poids des deux sélecteurs sont 0, 1, 0 , 1. La dernière règle entre en vigueur.

2. Différents poids, plus la valeur de poids sera élevée

La priorité du sélecteur Id est supérieure à celle du sélecteur d'attribut. Par exemple, dans l'exemple ci-dessous, le poids. de #p123 dans la feuille de style est évidemment plus élevé que [ id=p123] a un poids plus élevé.

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

3. Principe de proximité

Par exemple, j'ai défini le style A pour DOM dans la feuille de style, puis j'ai également défini le style B pour DOM en html, en appliquant B

.A {  padding: 5px;
}

rrree

4. Quel que soit le nombre d'éléments composant le sélecteur, aucun sélecteur de classe n'a une priorité plus élevée.

est l'exception ci-dessus.

5. Ignorer la distance de l'arborescence DOM

Le style suivant :

<style type="text/css">
  .B {    padding: 10px;
  }
</style>

Lorsqu'il est appliqué au HTML suivant :

body h1 {  color: green;
}
html h1 {  color: purple;
}

Le navigateur sera rendu en violet ;

En fait, la règle 1 s'applique également à cela, mais en raison de la différence dans la balise négative DOM, elle est sélectionnée pour la spécialisation.

6.:not Exceptions de pseudo-classes

:not Les pseudo-classes annulées ne seront pas considérées comme des pseudo-classes dans les calculs de priorité. En fait, elles seront toujours prises en compte lors du calcul du nombre de. sélecteurs. Les sélecteurs sont comptés comme des sélecteurs ordinaires.

<html><body>
  <h1>Here is a title!</h1>
</body></html>

Lorsqu'il est appliqué au HTML suivant, c'est l'effet de description de texte

div.outer p {
  color:orange;
}
div:not(.outer) p { 
 color: lime;
}

7.!exceptions de règle importantes

Lorsque vous utilisez la règle !important sur une déclaration de style, la déclaration de style remplace toutes les autres déclarations en CSS.

Bien que techniquement !important n'ait rien à voir avec la priorité, ils s'influencent directement.

Utiliser !important est une mauvaise habitude et doit être évitée autant que possible, car elle enfreint les règles de cascade inhérentes à la feuille de style et rend le débogage et la recherche de bogues plus difficiles.

Lorsque deux déclarations contradictoires avec la règle !important sont appliquées au même élément, la déclaration ayant la plus grande priorité sera utilisée.

Partage de vidéos d'apprentissage :

tutoriel vidéo CSS

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!