html - 忽略嵌套列表中的第 n 个子样式？

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: http://jsfiddle.net/5j1yhj2x/1/

移除了子组合器的 JSFiddle: https://jsfiddle.net/a9mxqu5t/

在第一个示例中，我的列表得到维护，但“高度”属性不起作用。在第二个示例中，嵌套列表被破坏，但高度属性有效。

我怎样才能构造这些，以便我的嵌套列表不会获得样式？

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;
}