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

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 fieldset”优先于“.MyForm .MyInput fieldset”。我在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个类，因此它比后一个规则更具体。只需将后一个规则作为特定或更具体的规则，使其具有相同的类名称。