Une introduction à l'ordre de priorité CSS

L'ordre et la priorité CSS sont une partie difficile du style des pages Web. Vous découvrirez peut-être un jour que le style CSS que vous avez essayé d'appliquer ne fonctionne pas. Il semble que la page Web n'exécute pas votre code. Cela peut être dû à un ordre CSS ou à des conflits de priorité. Cet article explorera ce que sont l'ordre et la priorité CSS et comment ils affectent le style des pages Web.

Priorité

Le navigateur décide quelles valeurs de propriété CSS sont pertinentes pour l'élément. Cette règle est basée sur la façon dont les sélecteurs CSS composent différents types de règles. La priorité est le nom exact qui donne du poids à une déclaration CSS spécifique. Le poids ou « importance » de chaque déclaration est déterminé par plusieurs types de sélecteur égaux au sélecteur correspondant. (Lecture recommandée : Comment calculer la priorité CSS? et Ordre de priorité de style CSS)

Priorité uniquement Applicable uniquement lorsqu'un élément a plusieurs déclarations, l'élément cible aura la priorité en fonction de la valeur inhérente du sélecteur. Voici une liste pour mesurer la différence entre les valeurs du sélecteur :

Sélecteur de type : Ce sera un pseudo-élément ou une
classe comme h1, h1, etc. Sélecteurs de classe : ceux-ci incluent des sélecteurs d'attributs et des pseudo-classes comme : survol, etc.
Sélecteurs d'ID : tout type de sélecteur d'ID.

Les sélecteurs universels n'ont aucun effet sur la priorité, et certains d'entre eux incluent des sélecteurs combinés comme (+, -, >, ~). Nous avons mentionné précédemment que les styles en ligne (tels que le gras) remplaceront toujours les styles dans les feuilles de style externes et figureront en haut de la chaîne avec la priorité la plus élevée.

Il y a certaines règles que vous devez connaître avant de continuer. Dans le CSS en ligne, les attributs de style du HTML sont avant tout des règles dans les styles et les fichiers CSS. Les sélecteurs spécifiques auront également priorité sur les sélecteurs moins spécifiés. Le code plus loin dans le document écrasera tous les rôles précédents définis précédemment.

Attention :! importantExceptions

Les exceptions à toutes ces règles de spécificité sont lorsque vous appelez ! méthode importante. Lorsqu'elle est appelée, elle remplace toutes les autres déclarations. Même si cela fonctionne, c'est généralement une mauvaise pratique. Cela brise la cascade naturelle dans la feuille de calcul et rend le débogage difficile. La meilleure pratique pour éviter de l’utiliser est simple. Tout d’abord, vous devez examiner les règles de spécificité pour voir la priorité avant un autre élément de style. Si vous devez l'utiliser ! important, utilisez-le à bon escient en l’appliquant uniquement sur une seule page.

Cascading

Vous ferez mieux d'utiliser Cascade que de l'utiliser ! méthode importante. Pour tous ceux qui ne connaissent pas les aspects de base du CSS ou des feuilles de style en cascade, la cascade est l'algorithme permettant de combiner les valeurs de différentes propriétés.

La cascade fonctionne en recherchant d'abord toutes les déclarations CSS appliquées à un élément ou un attribut. Cela commence par son origine (où il a été déclaré) puis par l'importance de la déclaration. Il calculera ensuite la spécificité. Tout CSS intégré dans un fichier HTML suivra la feuille de style externe, quel que soit l'ordre. Il est important de prendre conscience des étapes que prendra la cascade.

En général, s'il y a un conflit entre des éléments de style concurrents, il y a des problèmes de spécificité à considérer. Si un élément se comporte de la même manière que si vous ne l'aviez pas codé, alors il hérite des styles de quelque chose de priorité plus élevée. Commencez votre style avec un minimum de spécificité pour vous assurer que ce problème ne se produit pas.

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!