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

Question

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

例:

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

这样可以防止必须向CSS页面中的每个第二个div 添加类,同时防止样式被传递到第三个等等的子节点.

Answer 1

你可以明确告诉它与搜索仅1更深一层的>操作.

请考虑以下示例:

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

这将搜索#target的直接子元素<p>,而该元素中,将搜索的直接子元素<span>.因此,如果存在嵌套<p>元素及其内部的跨度,则不会受到影响.

一个非常常见的用途是嵌套列表项,您希望主列表设置样式,而辅助列表则不需要.

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