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

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