Comment remplacer les styles `!important` en ligne en CSS ?

Remplacer les styles !important en ligne

En CSS, l'indicateur !important est utilisé pour indiquer qu'une propriété de style doit avoir priorité sur toutes les autres. déclarations. Cependant, vous pouvez rencontrer des situations dans lesquelles vous devez remplacer un style en ligne par !important à partir d'une feuille de style.

Considérez l'élément HTML suivant :

<code class="html"><div style="display: none !important;"></div></code>

Si vous souhaitez rendre cet élément visible , vous ne pouvez pas simplement utiliser une autre règle !important dans votre feuille de style, car elle ne remplacera pas le style en ligne.

Solution

Pour remplacer un style en ligne avec !important, vous devez utiliser l'indicateur !important sur un sélecteur plus spécifique. Dans ce cas, vous pouvez utiliser un sélecteur de classe comme celui-ci :

<code class="css">div.visible {
  display: block !important;
}</code>

Cette règle ciblera tout élément div avec la classe visible et remplacera l'affichage en ligne : aucun style, rendant l'élément visible.

<code class="html"><div style="display: none !important;" class="visible"></div></code>

Notez que cette technique ne fonctionne que si le sélecteur que vous utilisez dans votre feuille de style est plus spécifique que le sélecteur en ligne. De plus, il est généralement recommandé d'éviter d'utiliser !important de manière excessive, car cela peut rendre votre code CSS plus difficile à maintenir.

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!