覆盖以前的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背景

回答

相关问题