Que faire en cas de conflit de style CSS

Solution : 1. Affinez le sélecteur et écrivez la description du sélecteur avec plus de précision ; 2. Écrivez à nouveau le nom du sélecteur ; 3. Modifiez l'ordre dans la feuille de style CSS ; 4. Augmentez activement la priorité si nécessaire. Ajoutez le mot-clé "!important". " d'après le style utilisé.

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

1. Affinez le sélecteur

Écrivez la description du sélecteur avec plus de précision en utilisant un combinateur (Combinator), par exemple, pour l'extrait de code suivant, si vous souhaitez ajouter des styles à .apple dans . sur les téléphones portables, utiliser uniquement .apple aura inévitablement un impact sur .apple dans .fruit.

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

Vous pouvez utiliser la description plus précise de Descendant Combinator ou Child Combinator. Plus la description est précise, plus la priorité est élevée, et les descriptions de priorité plus élevée remplaceront les descriptions de priorité inférieure.

/* 后代组合器：所有后代节点 */
.cellphones .apple {
	border: 1px solid black;
}

/* 更加精确的后代组合器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组合器：直接子节点 */
.cellphones > .apple {
  border: 1px solid red;
}

Si vous ajoutez tous les styles ci-dessus à .apple dans l'ordre, la bordure finira par apparaître en bleue.

Pour les règles de priorité détaillées, voir Priorité CSS

2. Réécrire le nom du sélecteur

est essentiellement un cas particulier de la situation précédente. Par exemple, pour .apple, ajoutez le style suivant :

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

Finalement, la bordure apparaîtra en violet.

3. Modifiez l'ordre dans la feuille de style CSS

Pour les styles spécifiés par le même type de sélecteur, les styles ultérieurs dans le fichier CSS écraseront les styles précédents. Par exemple, pour l'élément div dans le code suivant, le résultat du rendu du navigateur sera rouge :

<div class="redBorder" class="blackBorder"></div>

.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

Il convient de noter que bien que .blackBorder apparaisse après .redBorder dans le fichier HTML, la priorité est déterminée en fonction de leur ordre d'emplacement dans Fichiers CSS. En d’autres termes, seul le .redBorder qui se trouve plus tard dans le fichier CSS sera utilisé.

4. Augmenter activement la priorité (non recommandé)

Il existe également un moyen simple et grossier mais non recommandé, qui consiste à ajouter le mot-clé !important après le style à utiliser pour augmenter la priorité du style à un très haut niveau. Par exemple :

<div class="redBorder" class="greenBorder"></div>

.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

Avec le code ci-dessus, la bordure apparaîtra en vert.

Utiliser !important est une très mauvaise habitude, qui enfreindra les règles en cascade inhérentes à la feuille de style et rendra le débogage très difficile !

Apprentissage recommandé : 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!