Remplacer les styles CSS3 - Les mannequins

Avec les styles CSS3 hérités, vient la possibilité de remplacer une règle de style héritée. Par exemple, jetez un oeil au code suivant pour avoir une idée de ce que cela pourrait signifier:

overRide. html body {color: red;} p {couleur: vert;}. myClass {color: blue;} #whatColor {color: purple;} Cette div n'a que le style du corps.
Ceci est un paragraphe régulier avec un style de paragraphe






Ce paragraphe est membre d'une classe
Ce paragraphe est membre d'une classe et possède un ID, les deux avec des règles de style.

La question est la suivante: De quelle couleur sera l'élément whatColor? C'est un membre du corps, donc ça devrait être rouge. C'est aussi un paragraphe, et les paragraphes sont verts. C'est aussi un membre de la classe myClass, donc ça devrait être bleu. Enfin, il s'appelle whatColor, et les éléments avec cet ID doivent être en violet.

Quatre règles de couleurs apparemment contradictoires sont toutes abandonnées sur ce pauvre élément. De quelle couleur sera-t-il?

CSS dispose d'un système de classement clair pour gérer ce type de situation. En général, des règles plus spécifiques l'emportent sur des règles plus générales. Voici la priorité (de la plus haute à la plus basse):

1. Préférence de l'utilisateur

   L'utilisateur a toujours le choix final quant aux styles utilisés. Les utilisateurs ne sont pas obligés d'utiliser des styles et peuvent toujours modifier la feuille de style pour leur propre copie locale de la page. Si un utilisateur doit appliquer un style spécial (par exemple, un contraste élevé pour les personnes ayant une déficience visuelle), il devrait toujours avoir cette option.

2. Style local

   Un style local (défini avec l'attribut style dans le code HTML) a la priorité la plus élevée des styles définis par le développeur. Il annule tous les autres styles.

3. id

   Un style attaché à un identifiant d'élément a beaucoup de poids car il remplace tous les autres styles définis dans la feuille de style.

4. Classe

   Les styles attachés à une classe remplacent le style de l'élément de l'objet. Donc, si vous avez un paragraphe avec une couleur verte qui appartient à une classe colorée en bleu, l'élément sera bleu car les styles de classe sont supérieurs aux styles d'éléments.

5. Elément

   Le style de l'élément a la priorité sur l'un de ses conteneurs. Par exemple, si un paragraphe est à l'intérieur d'un div, le style de paragraphe a le potentiel de surcharger le div et le corps.

6. L'élément conteneur

   divs, tables, listes et autres éléments utilisés comme conteneurs transmettent leurs styles. Si un élément se trouve dans un ou plusieurs de ces conteneurs, il peut en hériter des attributs de style.

7. Corps

   Tout ce qui est défini dans le style de corps est une page globale par défaut, mais il sera remplacé par tous les autres styles.

Dans l'overRide. Exemple html, la règle d'id a priorité, donc le paragraphe s'affiche en violet.