CSS에서 상속을 어떻게 해제 할 수 있습니까?

Question

스타일이있는 <ul> 및 <li> 태그를 사용하여 탭 메뉴를 만들었습니다. 문제는 부모 <ul>, <li>, <a>은 자식을 상속한다는 것입니다. CSS를 상속받지 못하게하려면 어떻게해야합니까?

나는 > 또는 <과 같은 것을 넣어야하지만 확실하지는 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

<stlye> 
    #tabPromote li { display: inline; } 
    #tabPromote ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; } 
    #tabPromote ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px 0 0; } 
    #tabPromote ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; } 
</stlye> 

<div id="tabPromote"> 
    <ul> 
     <li><a href="#tab-1">tab1</a></li> 
     <li><a href="#tab-2">tab2</a></li> 
    </ul> 
    <div class="tabCont" id="tab-1"> 
     <ul> 
      <li>list1</li> 
      <li>list1</li> 
     </ul> 
    </div> 
    <div class="tabCont" id="tab-2"> 
     <ul> 
      <li>list1</li> 
      <li>list1</li> 
     </ul> 
    </div> 
</div> 

<script> 
    $('#tabPromote div.tabCont').hide(); 
    $('#tabPromote div:first').show(); 
    $('#tabPromote ul li:first').addClass('active'); 
    $('#tabPromote ul li a').click(function(){ 
     $('#tabPromote ul li').removeClass('active'); 
     $(this).parent().addClass('active'); 
     var currentTab = $(this).attr('href'); 
     $('#tabPromote div.tabCont').hide(); 
     $(currentTab).show(); 
     return false; 
    }); 
</script> 

Answer 1

당신은 <div id="tabPromote"> 후 처음 수준으로 스타일을 제한하는 #tabPromote > ul 및 #tabPromote > ul li를 사용할 수 있습니다.

Answer 2

둘러싸는 요소의 직계 하위를 대상으로하려면 '>'을 사용할 수 있습니다. 이것은 더 깊게 중첩 된 요소를 제외합니다.

예는 :

#tabPromote > ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; } 
#tabPromote > ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px   0 0; } 
#tabPromote > ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; }