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

Question

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

Answer 1

这是一个 CSS 子选择器。

P > SPAN

表示将以下样式应用于作为

标记的子级的所有 SPAN 标记。

请注意，“孩子”的意思是“直系后裔”，而不仅仅是任何后代。

P SPAN

是一个 descendant 选择器，将遵循的样式应用到所有

SPAN

标签，这些标签是

标签的子标签或任何其他标签的递归子标签，这些标签是

标签的子/后代。

P > SPAN

仅适用于作为

SPAN

标签的子级的

标签。

Answer 2

p em

将匹配

<em>

中的任何

<p>

。例如，它将匹配以下

<em>

s：

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

另一方面，

p > em

只会匹配

<em>

是

<p>

的直系子代。所以它会匹配：

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

但不是：

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

Answer 3

这被称为子组合器：

添加了子组合器选择器能够设计内容的样式包含在其他元素中的元素指定的元素。例如，假设有人想将白色设置为 div 标签内超链接的颜色对于某个班级，因为他们有一个黑暗的背景。这可以是通过使用一段时间来完成将 div 与类资源结合和一个大于号作为组合器将对与 a 组合，如下图：

div.resources > a{color: white;}

Answer 4

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

Answer 5

子组合器 (>) 放置在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是第一个匹配的元素的direct children。