Comment l'ordre des feuilles de style détermine-t-il la priorité du remplacement CSS ?

Ordre de remplacement des feuilles de style en CSS

En HTML, les feuilles de style peuvent être liées dans l'en-tête pour appliquer des styles spécifiques à la page Web. L'ordre de ces feuilles de style détermine quels styles sont prioritaires. Dans le scénario décrit, deux feuilles de style sont liées : styles.css et master.css.

L'ordre de remplacement suit les règles de cascade CSS. La règle de la « dernière ligne » en CSS détermine que la dernière valeur déclarée d'une propriété est prioritaire sur toutes les déclarations précédentes. Cependant, cette règle ne s’applique qu’au sein d’une seule feuille de style. Lorsqu'il s'agit de plusieurs feuilles de style, les règles suivantes s'appliquent :

Références en cascade et feuilles de style

L'élément en cascade de CSS ne fonctionne pas de la même manière pour les références de feuilles de style que pour fonctions CSS typiques. En termes de références aux feuilles de style, l'ordre dans lequel les feuilles de style sont liées détermine la priorité. La dernière feuille de style liée remplace toutes les règles conflictuelles dans les feuilles de style précédemment liées.

Spécificité et !important

La spécificité d'une règle CSS définit son poids. Les règles ayant une spécificité plus élevée ont priorité sur les règles ayant une spécificité moindre. La spécificité est déterminée par le nombre d'ID, de classes et de noms d'éléments utilisés dans le sélecteur. La déclaration !important peut également être utilisée pour remplacer d'autres règles.

Exemple

Dans le scénario donné, master.css est lié après styles.css. En supposant que les deux feuilles de style contiennent des règles pour l'élément body, les règles de master.css remplaceront les règles de styles.css pour les raisons suivantes :

• master.css est lié en dernier.
• master.css contient des règles plus spécifiques (par exemple, html, body:not(input="button")) qui remplacent les règles plus générales de styles.css (par exemple, le corps).

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!