忽略嵌套列表中的第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/

在第一示例中，我的列表被保持，但 「高度」 屬性ISN」不工作。在第二個示例中，嵌套列表已被破壞，但高度屬性正在工作。

我該如何構造這些以便我的嵌套列表無法獲得樣式？

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