Partage d'exemples d'ordre de remplacement de style CSS dans les feuilles de style

Parfois lors du processus d'écriture du CSS, certaines restrictions ne fonctionnent toujours pas, ce qui implique le problème du remplacement du style CSS, comme suit

Code CSS

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

.current_block {  
    border: solid 2 #AE0;  
}

En regardant dans certains manuels (w3schools, etc.), il est seulement indiqué que l'ordre des 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 organisées. 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 :

Code CSS

.class1 {  
    color: black;  
}  

.class2 {  
    color: red;  
}

Lorsqu'un élément spécifie une classe, utilisez class="class2 class1 " Spécifié de cette manière, bien que class1 soit classé derrière class2 lorsqu'il est spécifié dans l'élément, parce que class1 est devant class2 dans le fichier de feuille de style, class2 a toujours une priorité plus élevée à ce moment. L'attribut de couleur est rouge, et Non noir.

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

Code CSS

.class1 {  
    color: black !important;  
}  

.class2 {  
    color: red;  
}

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

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

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  

.block {  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

 需要莫仁为#navigator元素指定class="block"

 

2. 使用!important:

 Css代码  

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

.current_block {  
    border: solid 2 #AE0 !important;  
}

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!