How is the “greater than” or “>” character used in

问题:

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?

回答1:

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

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

回答2:

p em

will match any <em> that is within a <p>. For instance, it would match the following <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:

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

But not:

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

回答3:

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.resources > a{color: white;}

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

回答4:

E > F

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

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