CSS:覆盖父元素颜色

Question

我有一个导航栏，它由水平列表元素组成，这些元素有一个外部容器和它们所属的元素类。它们都具有相同的属性，但我只想让列表元素之一 (#nav_user) 具有与其余元素不同的颜色。外部容器 (nav_item_container) 决定了列表元素的颜色。如果我添加另一个具有新颜色的 child ，例如我对 #nav_user 所做的，颜色不会填满整个 block ，只有一条水平线等于文本的大小。在 div 中添加“style = background-color”似乎可以解决这个问题。但是有更好的方法吗？我希望这是有道理的。感谢您的帮助。

编辑:添加 fiddle 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;
}

Answer 1

如果我明白你的意思。您需要为背景提供 #nav_user 的完整高度，然后提供与高度相同的 line-height 以使其垂直居中。

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

检查 JsFiddle here