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

159

我已经在CSS文件中多次看到此字符，但我不知道其用法。谁能向我解释一下，并说明它们在简化页面样式中的作用？

css css-selectors

— 山姆152
source

1

请注意，它需要Windows Internet Explorer 7或更高版本。或FF或某些现代浏览器。http://msdn.microsoft.com/zh-cn/library/aa358819(VS.85).aspx

— Vili，2009年

顺便说一句，>通常被称为“大于”（或者，严格来讲，将其称为直角括号）。

— 理查德

1

— TZHX 2015年

199

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

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

— tpdi
source

6

但是请注意-在ie6中不支持

— -wheresrhys

138

p em

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

<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>

— 布莱恩·坎贝尔
source

7

尼斯，清楚的例子。尽管tpdi的回答很有帮助，但这一回答确实使它更容易理解。

— J. Scott Elblein

8

这被称为儿童组合器：

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

div.resources > a{color: white;}

— 亚当·亚历山大
source

4

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

— 托比亚斯
source