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

您可以使用#tabPromote > ul和#tabPromote > ul li将样式限制在<div id="tabPromote">之后的第一级。

Answer 2

要定位封闭元素的直接子元素，可以使用“＆gt;”。这排除了更深层次的嵌套元素。

例如：

#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;  }

如何在CSS中禁用继承？

2 个答案: