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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/746525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:30:50  来源:igfitidea点击:

How is the "greater than" or ">" character used in CSS?

csscss-selectors

提问by Sam152

I have seen this character a number of times in CSS files but I have no idea how its used. Can anyone explain it to me and show how they are useful in making a page style easier?

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

回答by tpdi

It's a CSS child selector. P > SPANmeans applying the style that follows to all SPAN tags that are children of a Ptag.

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

Note that "child" means "immediate descendant", not just any descendant. P SPANis a descendant selector, applying the style that follows to all SPANtags that are children of a Ptag or recursively children of any other tag that is a child/descendant of a Ptag. P > SPANonly applies to SPANtags that are children of a Ptag.

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

回答by Brian Campbell

p em

will match any <em>that is within a <p>. For instance, it would match the following <em>s:

将匹配任何<em>这是内部的<p>。例如,它将匹配以下<em>s:

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

On the other hand,

另一方面,

p > em

Will match only <em>s that are immediate children of <p>. So it will match:

将仅匹配<em>的直接子代<p>。所以它将匹配:

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

But not:

但不是:

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

回答by Adam Alexander

this is known as a Child Combinator:

这被称为子组合器:

A child combinator selector was added to be able to style the content of elements contained within other specified elements. For example, suppose one wants to set white as the color of hyperlinks inside of div tags for a certain class because they have a dark background. This can be accomplished by using a period to combine div with the class resources and a greater-than sign as a combinator to combine the pair with a, as shown below:

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

div.resources > a{color: white;}

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

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

回答by Tobias

E > F

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

E > F

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

more on http://www.w3.org/TR/CSS21/selector.html#child-selectors

更多关于http://www.w3.org/TR/CSS21/selector.html#child-selectors