1

我通过使用<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>
4

2 回答 2

2

您可以使用#tabPromote > ul和#tabPromote > ul li将样式限制在<div id="tabPromote">.

于 2013-08-20T16:07:39.207 回答
1

要定位封闭元素的直接子元素，可以使用“>”。这不包括更深的嵌套元素。

前任：

#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;  }
于 2013-08-20T16:10:18.423 回答