CSS限制深度样式可以应用于元素

Question

有人知道在选择具有CSS的元素时限制子元素深度的解决方案吗?

的例子:

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

这将防止不得不添加CSS类在页面中的每一个单独的第二个div，同时防止样式被传递到第三，第四等子。

Answer 1

您可以明确地告诉它只使用 >运算符搜索更深一级。

考虑下面的例子:

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

这将在#target中搜索直接子元素<p>，并在该元素中搜索直接子元素<span>。因此，如果有一个嵌套的<p>元素，并且在它里面有一个span，它不会受到影响。

一个非常常见的用法是用于嵌套列表项，在这种情况下，您希望主列表具有样式，但次要列表不具有样式。

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