1

スタイル付きの<ul>とタグを使用してタブ メニューを作成しました。<li>問題は、親<ul>のスタイルが子<li>に<a>継承されることです。CSS の継承を無効にするにはどうすればよいですか?

>orのようなものを入れるべきだと思います <が、よくわかりません。どうすればこの問題を解決できますか?

<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 に答える