CSS的使用順序

我有這個CSSCSS的使用順序

.menuPopup div { 
    width: 100%;   
    padding: 5px; 
} 

.menuClose { 
    width:10px; 
    height:10px; 
    padding:0px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    cursor:pointer; 
}

應該適用於這個HTML：

<div class="menuPopup"> 
    <div >A</div> 
    <div >B</div> 
    <div >C</div> 
    <div class="menuClose">X</div> 
</div>

當應用時，.menuPopup div聲明八方通覆蓋.menuClose。

如何更改順序？即。使「X」的寬度爲10px而不是100%？

來源

2012-11-13 Majid Laissi

此外，你可能想看看「CSS特異性」。 – Erik

這是因爲你在上面的聲明更多選擇。

，如果你做到這一點應該覆蓋：

.menuPopup div.menuClose { 
    width:10px; 
    height:10px; 
    padding:0px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    cursor:pointer; 
}

請參閱這篇文章對CSS層疊的優先級是如何被處理的解釋： http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html

來源

2012-11-13 00:31:50

謝謝你的這個作品，但是你認爲'更多選擇器'是什麼意思？ –

'計數屬性，類名和僞類的數量。最高分勝出！「從來不知道這個規則！再次感謝 –

.menuPopup div使用了兩個。 .menuPop和div。 .menuClose只使用一個。如果定義了衝突的樣式，CSS將通過選擇器來確定優先級。技術上.menuClose屬於第一個聲明，因爲它也是一個div。所以css選擇第一個選擇器是因爲你經歷了在.menuPop中指定div的麻煩......如果這沒有意義，只要相信你就會習慣它。更具體的選擇器，更高的優先級 –

您可以嘗試使用!important您要規則被強制執行。例如：

.menuClose { 
width:10px !important; 
height:10px !important; 
etc... 
}

來源

2012-11-13 00:32:32 NickD

，它會覆蓋它，但絕對需要使用！important會更好。只需向下選擇鑽而不關閉掉其他級聯樣式 –

我想過這會工作，但如果我記得沒錯 –

雖然'！important'會工作，它不是好的做法，最好找出CSS特異性和避免這種「黑客」可以這麼說。 – Ryan

CSS的使用順序

回答

相關問題