CSS：覆盖父元素的颜色

我有一个导航栏，它由水平列表元素组成，它们有一个外部容器和元素类，它们是它们的一部分。它们都具有相同的属性，但我只希望其中一个列表元素（#nav_user）具有与其他颜色不同的颜色。外部容器（nav_item_container）确定列表元素的颜色。如果我使用新颜色添加另一个孩子（例如我使用#nav_user），颜色不会填充整个块，只有等于文本大小的水平线会更改。在div中添加“style = background-color”似乎解决了这个问题。但有没有更好的方法来做到这一点？我希望这是有道理的。谢谢你的帮助。CSS：覆盖父元素的颜色

编辑：添加小提琴http://jsfiddle.net/h4ecB/

<ul> 
    <li> 
     <div class="nav_item_container"> 
      <div class="nav_element"> 
       <div id ="nav_user"> 
        Item with different color here 
       </div> 
      </div> 
     </div> 
    </li> 
</ul> 

<div id ="nav_links"> 
    <ul> 
     <li><div class ="nav_item_container"><div class ="nav_element"> Item1 </div></div></li> 
     <li><div class ="nav_item_container"><div class ="nav_element"> Item2 </div></div></li> 
     <li><div class ="nav_item_container"><div class ="nav_element"> Item3 </div></div></li> 
    </ul> 
</div>   

li .nav_item_container .nav_element #nav_user{ 
    background-color: #FFBF00; 
} 

li{ 
    display: inline-block; 
    list-style-type: none; 
} 

li .nav_item_container{ 
    display: table; 
    overflow: hidden; 
    height: 45px; 
    min-width: 100px; 
    background-color: #FF0000; 
} 

li .nav_item_container .nav_element{ 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    color: #FFFFFF; 
}

来源

2013-10-08 roverred

可以请你加小提琴 – supersaiyan

我已经从你的代码http://jsfiddle.net/HjAHh/小提琴。但我仍然没有得到你的问题 –

如果我明白你的意思。您需要给整个高度，为背景，然后line-height具有相同的高度以使其垂直居中。

#nav_user { 
    .... 
    height:45px; 
    line-height:45px; 
}

检查JsFiddle here

来源

2013-10-08 09:33:55

感谢您的解释，清除它。 – roverred

我很高兴能帮上忙！ –

CSS：覆盖父元素的颜色

回答

相关问题