忽略嵌套列表中的nth-child样式？

Question

我正在创建一个按钮列表，这些按钮需要根据有多少样式进行设置，以便它们适合容器。更多按钮/选项意味着我需要更小的按钮尺寸。

为此，我使用以下解决方案：

.modal-body-content li:first-child:nth-last-child(4), .modal-body-content li:first-child:nth-last-child(4) ~ li {
width: 48%;
height: 100px;
}

只要我有4个按钮，就会应用它。我在这里将高度设置为100px。

问题是我的一个按钮也要求在里面有一个列表。嵌套列表不需要从上面的第n个孩子的东西中获得样式。我试图使用儿童组合选择器来解决这个问题，但这似乎不起作用。

JSFiddle with child combinator selector（＆gt;）： http://jsfiddle.net/5j1yhj2x/1/

删除了儿童组合子的JSFiddle： https://jsfiddle.net/a9mxqu5t/

在第一个示例中，我的列表已维护但“height”属性不起作用。在第二个示例中，嵌套列表已被破坏，但height属性正在运行。

我如何构造这些以便我的嵌套列表不能获得样式？

Answer 1

.modal-body-buttons > ul > li:first-child:nth-last-child(4), .modal-body-buttons > ul > li:first-child:nth-last-child(4) ~ li {
    width: 48%;
    height: 100px;
}