css - 为具有子元素的 <li> 设置样式

Question

我正在尝试创建一个带有下拉子菜单功能的顶部菜单。 我想定位具有附加子菜单(子元素)的列表项。这样我就可以使用不同的颜色列表样式等来设计它们。

HTML:

<nav>
    <ul><div id="logo">
            <img src="images/design/logo.png" alt="Logo for responsive template" />
        </div>
        <li>Home</li>
        <li>Parrent Link
            <ul>
                <li>Child Link</li>
                <li>Child Link</li>
                <li>Parrent Link
                    <ul>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
    </ul>
</nav>

因此每个父链接都有与其他链接不同的样式。

Answer 1

您可以使用 JQuery 来实现: example

$(function(){
    $('li').each(function(){   
        var parent = $(this).parent().parent();
        if(parent.is('li')){
            parent.addClass("colored");
        } 
    })
});

此解决方案假设您的 HTML 有效并且您使用 <ul>和<li>正确。