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>

所以每个Parrent链接都有另一种风格。

Answer 1

您可以使用JQuery执行此操作： example

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

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

Answer 2

您无法选择基于后代元素的元素。然后你就不能有这样的选择器：

选择包含<li>代码
的所有<ul>代码

另一方面，你可以

选择<ul>代码
中的所有<li>代码

你能做的最好的事情是分配一个班级：

<li>Child Link</li>
   <li>Child Link</li>
   <li class="sub">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>

Answer 3

每次创建新列表时，我都会更改ul.class。

这样，如果ul li有孩子，如果我想在那里生孩子，它会自动改变。

Answer 4

您只需使用CSS选择器，如下所示：

ul > li > li {
   // your css code here
}

您有W3C site中的官方文档。

无需使用id's或class代码

设置具有子元素的<li>样式</li>

4 个答案: