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

Question

有没有人知道如何限制使用 CSS 选择元素时的子元素深度？

例如：

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

这样做可以避免在页面中的每个第二个

标签上添加CSS类，同时防止样式传递给第三个、第四个等子元素。

- Code Junkie

Answer 1

你可以使用>运算符来明确告诉它仅搜索深度为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. */

- Madara's Ghost

---

@Michael，这部分是因为按规范，body不能包含文本节点。Body只能包含块级元素。 - Madara's Ghost

@Michael：我常常看到人们不停留在停车标志处，但这并不意味着这样做就是正确的。此外，浏览器可能会以你意想不到的方式解释它。 - Madara's Ghost

严格来说，规范似乎允许这样做：http://www.w3.org/TR/html-markup/body.html#body。Body可以包含流内容，即“流元素与普通字符数据交织在一起”。 - Michael

@Michael：的确，自上次我访问它以来，它已经改变了。获悉啦。 - Madara's Ghost

我想我明白为什么我的方法行不通了...使用'>'样式只适用于子节点，但由于所有该节点的子节点都包含在其中，因此它也适用于它们。没有纯文本选择器，因此它必须应用于整个文档（除非明确更改）。 - Michael