Cela signifie, essentiellement, ce qu'il dit; que «c'est important, ignorez les règles suivantes et tous les problèmes de spécificité habituels, appliquez cette règle!
En utilisation normale, une règle définie dans une feuille de style externe est remplacée par un style défini dans le headdocument, qui, à son tour, est remplacé par un style en ligne au sein de l'élément lui-même (en supposant une spécificité égale des sélecteurs). La définition d'une règle avec l !important'«attribut» (?) Écarte les préoccupations normales en ce qui concerne la règle «ultérieure» qui remplace les règles «antérieures».
De plus, en règle générale, une règle plus spécifique remplacera une règle moins spécifique. Donc:
a {/* css */}
Est normalement annulé par:
body div #elementID ul li a {/* css */}
Comme ce dernier sélecteur est plus spécifique (et peu importe où se trouve le sélecteur plus spécifique (dans la headou la feuille de style externe), il remplacera toujours le sélecteur moins spécifique (les attributs de style en ligne seront toujours remplacer le sélecteur spécifique «plus-» ou «moins-» car il est toujours plus spécifique.
Cependant, si vous ajoutez !importantà la déclaration CSS du sélecteur moins spécifique, elle aura la priorité.
L'usage !importanta ses buts (bien que j'aie du mal à y penser), mais c'est un peu comme utiliser une explosion nucléaire pour empêcher les renards de tuer vos poulets; oui, les renards seront tués, mais les poulets aussi. Et le quartier.
Cela fait également du débogage de votre CSS un cauchemar (d'expérience personnelle, empirique).
C'est aussi déroutant pour de nombreux développeurs comme dans de nombreux langages de programmation le préfixe! signifie pas .
rustyx
19
Un objectif de! Important serait dans un script GreaseMonkey où vous remplacez volontairement le CSS d'autres personnes qui est probablement plus spécifique que le vôtre.
au moins ce n'est pas sarcastique et dit important!(important NON)
user3553260
2
Vous avez écrit: "En utilisation normale, une règle définie dans une feuille de style externe est annulée par un style défini dans l'en-tête du document". Il est faux.
jlguenego
130
La règle! Important est un moyen de faire votre cascade CSS mais aussi de toujours appliquer les règles qui vous semblent les plus cruciales. Une règle qui a la propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.
la règle avec l'important sera celle appliquée (sans compter la spécificité )
Je crois qu'il !importantest apparu dans CSS1, donc chaque navigateur le prend en charge (IE4 à IE6 avec une implémentation partielle, IE7 + complet)
En outre, c'est quelque chose que vous ne souhaitez pas utiliser assez souvent, car si vous travaillez avec d'autres personnes, vous pouvez remplacer d'autres propriétés.
La confusion se produit comme !c'est un symbole pour NON dans certaines langues mais c'est plus clair maintenant.
Si8
2
Je suis particulièrement heureux que vous ayez inclus la syntaxe d'utilisation !important. CSS est suffisamment différent des autres langages pour qu'il soit facile d'oublier comment utiliser certaines choses.
blainarmstrong
3
@ Si8 - Oui, à cause de cette confusion, j'ai toujours pensé "ils" auraient dû le définir comme important!, ou peut IMPORTANT!- être , plutôt que !important. Je me demande si quelqu'un (qui pourrait lire ceci) sait pourquoi ils l'ont défini avec la ponctuation devant? De toute évidence, il est trop tard pour le changer maintenant.
Kevin Fegan
22
!important fait partie de CSS1.
Navigateurs le prenant en charge: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.
Cela signifie, quelque chose comme:
Utilisez-moi, s'il n'y a rien d'autre d'important autour!
!importantn'est pas limité à Safari 3+ uniquement; il l'a pris en charge dès le début comme tous les autres navigateurs non IE. IE le comprend à partir de la version 4, mais il ne le prend en charge qu'à partir de la version 7.
BoltClock
12
Il est utilisé pour influencer le tri dans la cascade CSS lorsque le tri par origine est effectué. Cela n'a rien à voir avec la spécificité comme indiqué ici dans d'autres réponses.
Voici la priorité du plus bas au plus élevé:
styles de navigateur
déclarations de feuille de style utilisateur (sans! important)
déclarations de feuille de style d'auteur (sans! important)
! feuilles de style d'auteur importantes
! feuilles de style utilisateur importantes
Après cette spécificité a lieu pour les règles ayant toujours un doigt dans le gâteau.
Réponses:
Cela signifie, essentiellement, ce qu'il dit; que «c'est important, ignorez les règles suivantes et tous les problèmes de spécificité habituels, appliquez cette règle!
En utilisation normale, une règle définie dans une feuille de style externe est remplacée par un style défini dans le
headdocument, qui, à son tour, est remplacé par un style en ligne au sein de l'élément lui-même (en supposant une spécificité égale des sélecteurs). La définition d'une règle avec l!important'«attribut» (?) Écarte les préoccupations normales en ce qui concerne la règle «ultérieure» qui remplace les règles «antérieures».De plus, en règle générale, une règle plus spécifique remplacera une règle moins spécifique. Donc:
Est normalement annulé par:
Comme ce dernier sélecteur est plus spécifique (et peu importe où se trouve le sélecteur plus spécifique (dans la
headou la feuille de style externe), il remplacera toujours le sélecteur moins spécifique (les attributs de style en ligne seront toujours remplacer le sélecteur spécifique «plus-» ou «moins-» car il est toujours plus spécifique.Cependant, si vous ajoutez
!importantà la déclaration CSS du sélecteur moins spécifique, elle aura la priorité.L'usage
!importanta ses buts (bien que j'aie du mal à y penser), mais c'est un peu comme utiliser une explosion nucléaire pour empêcher les renards de tuer vos poulets; oui, les renards seront tués, mais les poulets aussi. Et le quartier.Cela fait également du débogage de votre CSS un cauchemar (d'expérience personnelle, empirique).
la source
important!(important NON)Donc, si vous avez les éléments suivants:
la règle avec l'important sera celle appliquée (sans compter la spécificité )
Je crois qu'il
!importantest apparu dans CSS1, donc chaque navigateur le prend en charge (IE4 à IE6 avec une implémentation partielle, IE7 + complet)En outre, c'est quelque chose que vous ne souhaitez pas utiliser assez souvent, car si vous travaillez avec d'autres personnes, vous pouvez remplacer d'autres propriétés.
la source
!c'est un symbole pour NON dans certaines langues mais c'est plus clair maintenant.!important. CSS est suffisamment différent des autres langages pour qu'il soit facile d'oublier comment utiliser certaines choses.important!, ou peutIMPORTANT!- être , plutôt que!important. Je me demande si quelqu'un (qui pourrait lire ceci) sait pourquoi ils l'ont défini avec la ponctuation devant? De toute évidence, il est trop tard pour le changer maintenant.!importantfait partie de CSS1.Navigateurs le prenant en charge: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.
Cela signifie, quelque chose comme:
Utilisez-moi, s'il n'y a rien d'autre d'important autour!
Je ne peux pas le dire mieux.
la source
!importantn'est pas limité à Safari 3+ uniquement; il l'a pris en charge dès le début comme tous les autres navigateurs non IE. IE le comprend à partir de la version 4, mais il ne le prend en charge qu'à partir de la version 7.Il est utilisé pour influencer le tri dans la cascade CSS lorsque le tri par origine est effectué. Cela n'a rien à voir avec la spécificité comme indiqué ici dans d'autres réponses.
Voici la priorité du plus bas au plus élevé:
Après cette spécificité a lieu pour les règles ayant toujours un doigt dans le gâteau.
Références:
la source
!importants'agit d'un modificateur pour l' ordre en cascade developer.mozilla.org/en-US/docs/Web/CSS/Cascade (voir le tableau pour référence).Il modifie les règles de priorité de priorité des cascades CSS. Voir la spécification CSS2 .
la source