如何在CSS中使用"大于"或">"字符？

Question

我在CSS文件中已经多次看到这个字符,但我不知道它是如何使用的.任何人都可以向我解释并说明它们如何有助于使页面样式更容易吗？

Answer 1

这是一个CSS子选择器.P > SPAN表示将后面的样式应用于作为标记子项的所有SPAN P标记.

请注意,"孩子"的意思是"直系后代",而不仅仅是任何后代.P SPAN是一个后代选择器,将后面的样式应用于作为SPAN标记子级的所有标记,P或者递归地作为标记的子级/后代的任何其他标记的子级P.P > SPAN仅适用于作为SPAN标记子项的P标记.

Answer 2

p em

将匹配任何内容.例如,它将匹配以下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>

Answer 3

这被称为儿童组合:

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

div.resources > a{color: white;}