CSS限制深度樣式可應用於元素

Question

是否有人知道在選擇具有CSS的元素時限制子深度的解決方案？

例子：

.my-class div div:end(styles:here) 

這將防止不得不CSS類添加到每一個第二個div頁面，同時防止款式被傳遞到第三第四等孩子。

Answer 1

您可以專門告訴它只使用the > operator搜索更深一級。

請看下面的例子：

#target > p > span { 
    background: red; 
} 

這將搜索#target爲直接子元素<p>，那元素中，將搜索直接子元素<span>。因此，如果嵌套的<p>元素和其中的跨度，它將不會受到影響。

一個非常常見的用途是嵌套的列表項，您希望主列表的樣式，而次列表不是。

ul#parent > li /* Direct descendant. */ 
ul#parent > li > ul > li /* 2 levels deep descendant. */