CSS選擇多達N層深度的嵌套元素

我有一些嵌套元素，我試圖只選擇前N層。下面顯示了一個工作示例，我選擇前7個關卡並對其進行造型。這正是我想要的，然而，我希望有一種簡化的方式來選擇這些元素。CSS選擇多達N層深度的嵌套元素

在我的實際使用情況中，我不知道嵌套元素的總數，而我試圖選擇前50個級別，因此使用上述方法會非常混亂。不幸的是，我無法更改我的應用程序中的HTML，因此它需要成爲僅限CSS的方法。謝謝。

.container > div, 
 
.container > div > div, 
 
.container > div > div > div, 
 
.container > div > div > div > div, 
 
.container > div > div > div > div > div, 
 
.container > div > div > div > div > div > div, 
 
.container > div > div > div > div > div > div > div { 
 
    border-left: 1px solid; 
 
    padding-left: 15px; 
 
}

<div class="container"> 
 
    <div> 
 
    A 
 
    <div> 
 
     B 
 
     <div> 
 
     C 
 
     <div> 
 
      D 
 
      <div> 
 
      E 
 
      <div> 
 
       F 
 
       <div> 
 
       G 
 
       <div> 
 
        H 
 
        <div> 
 
        I 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-26 Steve J

你想讓'container'中的每個div都有針對性嗎？ – geeksal

*我無法更改我的應用程序中的HTML，因此它需要是僅CSS方法* - 它不能是腳本？ – BSMP

好吧，沒有html更改，但沒有jQuery？只有用CSS是不可能的。請參閱此主題http://stackoverflow.com/questions/12206935/is-there-a-css-haschildren-selector，http://stackoverflow.com/questions/1014861/is-there-a-css-parent-選擇器？noredirect = 1＆lq = 1，http://stackoverflow.com/questions/36613187/how-to-select-div-without-descendent-li-in-css?noredirect=1&lq=1 –

這是不可能在所有的CSS版本截至目前並據我所知Descendant Level Selector選擇所有元素到指定水平不計劃將很快實現。

你可以做的，而不是設置一個類來所有你想要選擇的元素和使用：

.container .class { 
    border-left: 1px solid; 
    padding-left: 15px; 
}

如果你不能做任何改動在你的HTML或使用JavaScript，那麼你現在擁有的是你最好的選擇。

來源

2016-07-26 17:58:59

CSS選擇多達N層深度的嵌套元素

回答

相關問題