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

amrnrhlw  于 2023-03-20  发布在  其他
关注(0)|答案(5)|浏览(117)

我在CSS文件中见过这个字符很多次,但我不知道它是如何使用的。有人能给我解释一下,并说明它们在使页面样式更简单方面是如何有用的吗?

bvuwiixz

bvuwiixz1#

这是一个CSS子选择器。P > SPAN表示将后面的样式应用到P标记的所有子SPAN标记。
注意,“子”表示“直接后代”,而不仅仅是任何后代。P SPAN是 * 后代选择器 *,将随后的样式应用于作为P标签的子标签的所有SPAN标签,或者递归地应用于作为P标签的子/后代的任何其它标签的子标签。P > SPAN仅适用于作为P标记子项的SPAN标记。

eivgtgni

eivgtgni2#

p em

将匹配<p>中的任何<em>。例如,它将匹配以下<em>

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

另一方面,

p > em

将只匹配<p>的直接子代<em>。因此,它将匹配:

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

但不是:

<p><strong><em>foo</em></strong></p>
1mrurvl1

1mrurvl13#

这被称为子组合器:
添加了子组合符选择器,以便能够设置其他指定元素中包含的元素内容的样式。例如,假设某个类的div标记内的超链接的颜色为白色,因为它们的背景为黑色。这可以通过使用句点将div与类资源组合,并使用大于号作为组合符将该对与如下图所示:

div.resources > a{color: white;}

(from http://www.xml.com/pub/a/2003/06/18/css3-selectors.html

kpbwa7wx

kpbwa7wx4#

E > F

匹配作为元素E的子元素的任何F元素。
更多信息请访问http://www.w3.org/TR/CSS21/selector.html#child-selectors

fxnxkyjh

fxnxkyjh5#

child combinator)位于两个CSS选择器之间,它只匹配第二个选择器匹配的元素,这些元素是第一个选择器匹配的元素的**直接子元素。

Child combinator more info

相关问题