CSS : 부모 요소 색 오버라이드

Question

바깥 컨테이너와 요소 클래스가있는 가로 목록 요소로 구성된 탐색 모음이 있습니다. 그것들은 모두 같은 속성을 가지고 있지만 목록 요소 중 하나 (#nav_user)를 사용하여 나머지 색상과 다른 색상을 만들고 싶습니다. 외부 컨테이너 (nav_item_container)는 목록 요소의 색상을 결정합니다. #nav_user와 같이 새 색상을 가진 다른 자식을 추가하면 색상이 전체 블록을 채우지 않고 텍스트 크기와 같은 수평선 만 변경됩니다. div에 "style = background-color"를 추가하면이를 수정하는 것으로 보입니다. 그러나 이것을 할 수있는 더 좋은 방법이 있습니까? 나는 그것이 의미가 있기를 바란다. 어떤 도움을 주셔서 감사합니다.

편집 : 추가 바이올린 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