css - CSS 中如何使用“大于”或“>”字符？

Question

我在 CSS 文件中多次看到这个字符，但我不知道它是如何使用的。任何人都可以向我解释一下，并展示它们在简化页面样式方面的作用吗？

score 232 · Accepted Answer

这是一个 CSS 子选择器。P > SPAN意味着将遵循的样式应用于作为标记子级的所有 SPANP标记。

请注意，“孩子”的意思是“直接后代”，而不仅仅是任何后代。P SPAN是后代选择器，将遵循的样式应用于作为SPAN标记的子级的所有P标记或作为标记的子级/后代的任何其他标记的递归子级P。P > SPAN仅适用于SPAN标签的子P标签。

score 154 · Accepted Answer

p em

将匹配a 中的任何内容。例如，它将匹配以下s：

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

另一方面，

p > em

将仅匹配s 的直接子级。所以它会匹配：

<p>Text <em>foo</em> bar</p>

但不是：

<p><strong><em>foo</em></strong></p>

score 9 · Accepted Answer

这被称为子组合器：

添加了一个子组合器选择器，以便能够对包含在其他指定元素中的元素的内容进行样式设置。例如，假设某个类的 div 标记内的超链接的颜色为白色，因为它们具有深色背景。这可以通过使用句点将 div 与类资源组合并使用大于号作为组合符将对与 a 组合来完成，如下所示：

div.resources > a{color: white;}

score 4 · Accepted Answer

E > F
匹配作为元素 E 的子元素的任何 F 元素。

4 回答 4