为什么我的嵌入式样式优先于外部样式表中的样式？

Question

我有以下样式：

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

然后将下面的HTML代码：

 
<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> 

所有字段集从外部样式表接受2px的固体灰色边框。我认为嵌套字段集将从嵌入式样式接收0边框，因为选择器“.MyInnerFieldSets字段集”优先于“.MyForm .MyInput字段集”。我在Firefox 3.6.8中测试了这个。这是预期的行为还是这是Firefox的问题？

感谢

Answer 1

选择器

.MyForm .MyInput fieldset 

具有更大特异性（更特定的）比选择

.MyInnerFieldsets fieldset 

更具体的选择器覆盖较不具体的一个。 Read about specificity and how it's calculated here.

要解决这个问题，请使第二个选择器更具体（例如.MyInput .MyInnerFields fieldset），或使第一个选择器的特定性更低（.MyInput fieldset）。

Answer 2

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

此规则有规定的2类，所以它比后者的规则更具体。简单地将后面的规则作为特定的或更具体的，通过预先将其与相同的类名称相提并论。