Priorité des styles dans la feuille de style CSS

Parfois dans le processus d'écriture du CSS, certaines restrictions ne fonctionnent toujours pas, ce qui implique la question de la couverture du style CSS, comme suit

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

Regardez dans certains supports pédagogiques (w3schools, etc.), Il est seulement dit que l'ordre du CSS est "style sur l'élément" > "élément de style dans l'en-tête du fichier" > "fichier de style externe", mais il n'y a pas d'explication détaillée sur la façon dont les priorités de plusieurs styles identiques dans le fichier de style sont disposés. Après avoir testé et continué à chercher, j'ai appris que les priorités sont organisées comme suit :

1 Plus la sélection du sélecteur d'élément de la feuille de style est précise, plus la priorité du style est élevée. :

Style spécifié par le sélecteur d'identifiant> Style spécifié par le sélecteur de classe> Style spécifié par le sélecteur de type d'élément

Donc, dans l'exemple ci-dessus, la priorité de style de #navigator est supérieure à la priorité de . current_block, avec le temps .current_block est le dernier ajout et ne fonctionne pas non plus.

2. Pour les styles spécifiés par le même type de sélecteur, plus tard dans le fichier de feuille de style, plus la priorité est élevée

Remarque, voici le fichier de feuille de style. Plus l'élément est avancé, plus la priorité est élevée, et non l'ordre dans lequel la classe d'élément apparaît. Par exemple, .class2 apparaît après .class1 dans la feuille de style :

.class1 {
    color: black;
}
.class2 {
    color: red;
}

Lorsqu'un élément spécifie une classe, il est spécifié en utilisant class="class2 class1". element Classé derrière class2, mais comme class1 est devant class2 dans le fichier de feuille de style, class2 a toujours une priorité plus élevée à ce moment-là et l'attribut de couleur est rouge, pas noir.

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

3. Si vous souhaitez que la priorité d'un certain style soit plus élevée, vous pouvez utiliser !important pour spécifier :

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

À ce moment-là, la classe utilisera le noir. au lieu du rouge.

Il existe deux solutions aux problèmes rencontrés au début :

1 Retirer la bordure du #navigator et la mettre dans une classe .block , et . block est placé avant .current_block :

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
}
.block {
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

Moren doit spécifier class="block"

2.Utilisez !important :

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0 !important;
}

Pour plus d'articles liés à la priorité des styles dans les feuilles de style CSS, veuillez faire attention au site PHP chinois !