Comment remplacer les styles CSS du site Web par du CSS personnalisé en utilisant la spécificité ?-tutoriel CSS-php.cn

Comment remplacer les styles CSS du site Web par du CSS personnalisé en utilisant la spécificité ?

DDD

Libérer： 2024-10-24 14:09:02

original

196 Les gens l'ont consulté

How to Override Website CSS Styles with Custom CSS Using Specificity?

Remplacement des styles CSS du site Web par du CSS personnalisé

Votre site Web se compose de trois fichiers CSS automatiquement inclus et vous n'avez pas accès au fichier index.html. Cependant, vous contrôlez les fichiers CSS du site Web et avez l'intention de créer un nouveau fichier CSS pour remplacer ceux existants.

Bien que l'utilisation de @import url(css4.css) ait pu être votre première tentative, elle n'a pas réussi remplacer le style du dernier fichier CSS. Ce problème découle du concept de « spécificité CSS ».

Spécificité CSS

La spécificité CSS détermine la préséance des déclarations de style sur un élément. Il se compose de quatre composants :

Inline : Styles appliqués directement à un élément
Id : Styles appliqués à un élément avec un ID
Classe : Styles appliqués à un élément avec une classe
Élément : Styles appliqués à toute instance d'un type d'élément particulier

Le poids de chaque composant est représenté dans le format suivant : inline | identifiant | classe | élément. Plus le poids d'une colonne est élevé, plus la spécificité est élevée.

Résoudre les conflits de spécificité

Pour remplacer les styles CSS existants, vous devez vous assurer que votre nouveau CSS a une spécificité plus élevée que les styles en conflit. Par exemple, si le CSS existant utilise un sélecteur de classe, vous devez utiliser un ID ou un sélecteur en ligne dans votre CSS personnalisé.

Exemple de décomposition de la spécificité

Le code fourni illustre la spécificité CSS en action :

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
#id {background-color: green}
.class {background-color: yellow }
section {background-color: blue }
.inline {background-color: purple !IMPORTANT }</code>

Copier après la connexion

avec le style en ligne background-color : le rouge apparaîtra violet malgré le style en ligne ayant une spécificité plus élevée (1|0|0|0). En effet, le CSS personnalisé définit !important sur la classe .inline, indiquant que son style doit remplacer tous les autres.

Conclusion

Comprendre la spécificité CSS vous permet de contrôler précisément la présentation du contenu de votre site Web. éléments. En utilisant délibérément des valeurs de spécificité plus élevées, vous pouvez facilement remplacer les styles CSS existants et créer des conceptions personnalisées sans avoir à modifier le fichier index.html d'origine.

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!