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

Question

我正在创建一个按钮列表，这些按钮需要根据按钮的数量设置不同的样式，以便它们适合容器。更多 buttons/options 意味着我需要更小的按钮尺寸。

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

.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/

在第一个示例中，我的列表得到维护，但 "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;
}

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

Ignore nth-child style in a nested list?

html

css

css-selectors