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

Question

有没有人知道在选择带有CSS 的元素时限制子深度的解决方案？

例子：

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

这将避免必须将CSS 类添加到页面中的每一秒 div，同时防止样式向下传递到第三个第四个等子级。

Answer 1

您可以使用the > operator 明确告诉它只搜索更深一层。

考虑以下示例：

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

这将在#target 中搜索direct 子元素<p>，并在该元素中搜索direct 子元素<span>。所以如果有嵌套的<p>元素，里面有一个span，就不会受到影响。

一个非常常见的用途是嵌套列表项，您希望主列表设置样式，而辅助列表不设置样式。

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