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

I have a nested list and I'm having trouble styling the last level UL.

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

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

What I need is to display the first UL items inline, and below them show their children as blocks. The problem is both UL have the same class (I can't change the HTML output, nor add classes), and I can't find the proper selector to target the second UL.

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

In the example here I tried adding a diferent class to menu 3 and 4, and that does the trick, but since changing class isn't an option I need to find a workaround to make the children display as blocks.

在这里的示例中,我尝试在菜单3和4中添加一个不同的类,这样做,但由于更改类不是一个选项,我需要找到一个解决方法,使子项显示为块。

Can someone take a look and advise?

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

3 个解决方案

#1

ul ul li { display: block; } or .same-class .same-class li { display: block; } should do the trick - that'll select all li that are a child of two or more ul or .same-class

ul ul li {display:block; }或.same-class .same-class li {display:block;应该做的 - 这将选择所有li是两个或多个ul或.same-class的子项

This might be useful (attribute selectors) depending on what your real code looks like (most likely useful if you're using AngularJS or something similar) or the nth-child might be good too because I'm not 100% sure what you mean.

这可能是有用的(属性选择器),取决于你的真实代码是什么样的(如果你使用AngularJS或类似的东西,最有用)或者nth-child可能也很好,因为我不是100%肯定你的意思。

Hope this helps!

希望这可以帮助!

#2

If you try plugging this in, you should be able to target the various components as you like. The first selector is targeting all list items that are direct children of the first menu. The second one is targeting any lists inside of a list item which itself is a direct decendant of the menu class. The third one is targeting just your list items in your nested lists. It gives a good degree of control for adjusting the layout.

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

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

.menu > li ul {
    display:block;

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

#3

If you was to use CSS parent selectors then try;

如果您要使用CSS父选择器然后尝试;

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

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

The > in the second rule will select all ul.same-class li elements where it has a li as a parent.

第二个规则中的>将选择所有ul.same-class li元素,其中li作为父元素。

#1