爲什麼我的嵌入式樣式優先於外部樣式表中的樣式？

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類，所以它比後者的規則更具體。簡單地將後面的規則作爲特定的或更具體的，通過預先將其與相同的類名稱相提並論。