“大于”符号或“>”在CSS中如何使用？

Question

193

我在 CSS 文件中多次看到过这个字符，但我不知道它的用途。有人能解释一下，并展示如何在页面样式中使用它吗？

我不确定你在CSS文件中指的是哪个字符，如果您提供更多细节或上下文可能会更有帮助。

- Sam152

1

请注意，此操作需要Windows Internet Explorer 7或更高版本，或是Firefox或其他现代浏览器。http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx - Vili

顺便提一下，“>”通常被称为“大于号”（或者严格来说是错误的，被称为右尖括号）。 - Richard

1

可能是什么意思？的重复问题。 - TZHX

5个回答

167

p em

将匹配任何位于内的。例如，它将匹配以下：

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

另一方面，

p > em

只会匹配作为  直接子元素的 。因此它将匹配：

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

但不是：

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

- Brian Campbell

13

很好的、清晰的例子。尽管tpdi的回答很有帮助，但这个回答真的让人更容易理解了。 - J. Scott Elblein

9

这被称为子组合器：

添加了子组合器选择器，以便能够样式化包含在其他指定元素中的元素的内容。例如，假设某人想要将超链接内的文本颜色设置为白色，因为它们位于具有深色背景的div标记内，可以使用句点将div与类resources组合，使用大于号作为组合器将这一对组合到a中，如下所示：

div.resources > a{color: white;}

CSS选择器是CSS的一个重要部分，它允许您根据元素的属性和关系选择DOM中的元素。 CSS3引入了一些新的选择器，包括伪类和属性选择器，这些选择器可以帮助您更准确地选择所需的元素。这些新选择器还可以与现有选择器组合使用，从而提供更大的灵活性。

- Adam Alexander

4

E > F
Matches any F element that is a child of an element E.

- Tobias

0

子选择器（>）被放置在两个CSS选择器之间。它仅匹配第二个选择器所匹配的那些元素，这些元素是由第一个选择器匹配的元素的直接子元素。

- Nick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tpdi · Accepted Answer

这是一个CSS子选择器。`P > SPAN`的意思是将后面的样式应用于所有作为`P`标签的子元素的`SPAN`标签。

请注意，“子元素”指的是“直接子代”，而不仅仅是任何后代。`P SPAN`是一个“后代选择器”，将后面的样式应用于所有作为`P`标签的子元素或递归地作为任何其他标签的子元素/后代的`SPAN`标签。`P > SPAN`仅适用于作为`P`标签的子元素的`SPAN`标签。