Déclarations de classes multiples! Important et priorité

Question

Théoriquement, si vous aviez ce scénario:

 <style type="text/css">
    .class1 {
        color:#F00 !important;
    }
    .class2 {
        color:#00F !important;
    }
</style>

<p class="class2 class1">Test</p>
 

Quelle couleur doit avoir la priorité? Comment les navigateurs déterminent-ils la priorité dans ce scénario?

Answer 1

Selon cette source: http://www.boogiejack.com/CSS_4.html

class2 doit remplacer le style class1.

Ordre de spécification: En dernier recours, lorsque toutes les autres spécifications de résolution de conflit ne peuvent pas déterminer quel style doit prévaloir, le dernier style spécifié est le style utilisé.

Answer 2

Même si ce n'est PAS important, il a le même comportement.

 <style type="text/css">
    .class1 {
    /*Red*/
        color:#F00;
    }
    .class2 {
    /*Blue*/
        color:#00F;
    }
</style>

<!-- Itz nothing about the order how you define here !-->
<p class="class2 class1"> Test X </p>
<p class="class1 class2"> Test Y </p>
 

Sortie

Test X -> Bleu
Test Y -> Bleu

Si vous donnez !important à une classe seulement, cela sera pris

Answer 3

Étant donné que les classes sont tous "égaux important" lorsqu'il est ajouté à un élément qu'il n'a pas d'importance de l'ordre dans lequel vous les affectez à votre paragraphe.

Dans ce cas, color en .class1 et .class2 sont déclarées comme important, mais parce que .classe 2 a été déclaré après .class1 le navigateur va afficher votre paragraphe en bleu, car il écrase la déclaration de la couleur de .class1

Aussi, jetez un oeil à ceci: http://jsfiddle.net/3uPXx/1/ Vous pouvez le voir, il n'a pas d'importance dans l'ordre dans lequel vous déclarez la classe de votre paragraphe. Depuis deux classes définissent le même attribut (color), il sera écrasé être la classe qui est le dernier déclaré.

La seule chose qui peut les remplacer c'est une ligne de style avec !important comme vous pouvez le voir dans la tripoter.