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