覆蓋以前的CSS背景

所以我有一個問題，我認爲這可能是我對css規則的理解缺乏。希望你們能幫助我！覆蓋以前的CSS背景

span.medback { 
background-color: FFFFCC; 
} 
span.hiback { 
background-color: FF3333; 
} 
span.item1 { 
display: block; 
background-color:#DCF0F7; 
width: 75px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
padding: 5px; 
text-align: center; 
} 
span.item2 { 
display: block; 
background-color:#DCF0F7; 
width: 70px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
padding: 5px; 
text-align: center; 
} 
span.item3 { 
display: block; 
background-color:#DCF0F7; 
width: 90px; 
height: 58px; 
border: 1px solid #000000; 
float: left; 
overflow: auto; 
padding: 5px; 
} 
span.item4 { 
display: block; 
background-color:#DCF0F7; 
width: 170px; 
height:48px; 
border: 1px solid #000000; 
float: left; 
overflow: auto; 
padding: 10px; 
} 
span.item5 { 
display: block; 
background-color: #DCF0F7; 
width: 80px; 
height:58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
} 
span.item6 { 
display: block; 
background-color: #DCF0F7; 
width: 30px; 
height: 58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
} 

span.item6 a img { 
width: 20px; 
height: 20px; 
} 
span.item1 a img { 
width: 20px; 
height: 20px; 
} 

span.item7 { 
display: block; 
background-color: #DCF0F7; 
width: 30px; 
height: 58px; 
border: 1px solid #000000; 
float:left; 
padding: 5px; 
}

赦免極長的CSS線 - 它必須得到我的問題

<ul id="sortable" class="mainlist"><li class="listwrap" id="arrange_69"><span class="item1 "><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span> 
<span class="item2 ">&#x25B2; | &#x25BC;</span> 
<span class="item3 ">monkey</span> 
<span class="item4 "></span> 
<span class="item5 "></span> 
<span class="item6 "><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span> 
<span class="item7 "><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li> 
<li class="listwrap" id="arrange_72"><span class="item1 hiback"><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span> 
<span class="item2 hiback">&#x25B2; | &#x25BC;</span> 
<span class="item3 hiback">new</span> 
<span class="item4 hiback"></span> 
<span class="item5 hiback">Mar 25th 2014 12:30 PM</span> 
<span class="item6 hiback"><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span> 
<span class="item7 hiback"><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li></ul>

我的問題是，爲什麼沒有在第二華里hiback類覆蓋的背景色的想法其他元素？有沒有一種方法可以獲得該功能？（重寫整個事情是一個選項，如果它的設計不佳）感謝您的幫助！

來源

2014-03-25 Jimbo

你的第一步調試應該是驗證你的CSS。 – cimmanon

你的第一個問題是，這些應該有#跡象顏色：

span.medback { 
    background-color: #FFFFCC; 
} 

span.hiback { 
    background-color: #FF3333; 
}

其次，你應該的項目類的定義後移動的這些定義。

小提琴：http://jsfiddle.net/ybJGw/

來源

2014-03-25 16:16:48

謝謝！所以在CSS規則中，它不是最後一個在html中命名的，它最後在CSS中被定義的哪一個？編輯 - 首先切換到最後（我的大腦會爆炸） – Jimbo

@Jimbo聲明的順序也是一個規則，以確定哪一個覆蓋另一個（旁邊的其他規則），這是一些基本的CSS知識。 –

不，請看昆汀的答案。如果兩個選擇器具有相同的特定性，那麼它就是在css中最後定義的那個選項。這就是爲什麼在.item定義之後移動.medback和.hiback允許.hiback被拾取的原因。 –

因爲：

您的hiback類規則是無效的，你缺少從顏色代碼
一個#的選擇也同樣specific
當選擇同樣具體，the last one gets applied last（覆蓋較早的）

來源

2014-03-25 16:16:57 Quentin

覆蓋以前的CSS背景

回答

相關問題