Pourquoi mon style intégré ne prend-il pas le pas sur les styles de ma feuille de style externe?

Question

J'ai la feuille de style suivante:

 
/* MyStylesheet.css */ 
.MyForm .MyInput fieldset { border: 2px solid grey } 

Et puis le code HTML suivant:

 
<div class="MyForm"> 
<div class="MyInput"> 
    <fieldset> 
    <style type="text/css"> 
    .MyInnerFieldsets fieldset { border: 0 } 
    </style> 
    <div class="MyInnerFieldsets"> 
    <fieldset> 
    </fieldset> 
    <fieldset> 
    </fieldset> 
    </div> 
    </fieldset> 
</div> 
</div> 

Tous fieldsets reçoivent la bordure grise solide 2px de la feuille de style externe. Je pensais que les fieldsets imbriqués recevraient la bordure 0 du style incorporé, puisque le sélecteur ".MyInnerFieldSets fieldset" a la priorité sur ".MyForm .MyInput fieldset". J'ai testé cela dans Firefox 3.6.8. Est-ce le comportement attendu ou est-ce un problème de Firefox?

Merci

Answer 1

Le sélecteur

.MyForm .MyInput fieldset 

a une plus grande spécificité(est plus précis) que le sélecteur

.MyInnerFieldsets fieldset 

Un sélecteur plus spécifique remplace un moins spécifique. Pour résoudre ce problème, rendez votre second sélecteur plus spécifique (par exemple .MyInput .MyInnerFields fieldset), ou faites en sorte que le premier soit moins spécifique (.MyInput fieldset).

Answer 2

.MyForm .MyInput fieldset { border: 2px solid grey } 

Cette règle a 2 classes spécifiées, il est donc plus précis que cette dernière règle. Il suffit de rendre cette dernière règle spécifique ou plus spécifique en l'ajoutant au même nom de classe.