Question

我有一个嵌套列表，我在设置最后一级UL时遇到了麻烦。

<ul class="same-class">
    <li>
        <ul class="same-class">
            <li>
            </li>
        </ul>
    </li>
</ul>

我需要的是显示内联的第一个UL项目，并在它们下面显示他们的孩子作为块。问题是UL都有相同的类（我不能改变HTML输出，也不能添加类），我找不到适当的选择器来定位第二个UL。

In the example here我尝试在菜单3和4中添加一个不同的类，这就是诀窍，但由于更改类不是一个选项，我需要找到一个解决方法，让子项显示为块

有人可以看看并提出建议吗？

Answer 1

ul ul li { display: block; }或.same-class .same-class li { display: block; }应该做到这一点 - 即选择所有li个孩子，其中包含两个或更多ul或.same-class

This might be useful (attribute selectors)取决于您的真实代码的样子（如果您使用的是AngularJS或类似内容，则最有用）或the nth-child might be good too，因为我不能100％确定您的意思。

希望这有帮助！

Answer 2

如果您要使用CSS父选择器，请尝试;

ul.same-class li {
   display: inline-block;
}

li > ul.same-class li {
   display: block;
}

第二条规则中的>会选择所有ul.same-class li元素作为父级li。{/ p>

Answer 3

如果您尝试将其插入，则应该可以根据需要定位各种组件。第一个选择器定位作为第一个菜单的直接子项的所有列表项。第二个是针对列表项中的任何列表，列表项本身是菜单类的直接后代。第三个是仅针对嵌套列表中的列表项。它为调整布局提供了很好的控制。

ul.menu:first-of-type > li{
    display:inline-block;
}

.menu > li ul {
    display:block;

}
.menu:first-of-type > li > ul > li {
    display:block;
}

使用相同的类设置嵌套UL的样式

3 个答案: