about using the greater-than sign in CSS styles and how to handle inheritance in CSS

Inherited to our program brings some trouble, so seriously learn the principle of inheritance, there is a good example, a method of handling inheritance, interested friends can refer to the next

Inheritance to a certain extent to make the program in the process of writing more convenient, but sometimes it will also bring some problems to our program, so it is important to learn the principle of inheritance, as well as the method of processing. Here is a way to handle inheritance in CSS.

In a piece of CSS code see a greater than sign (>), the code is as follows:

Body#css-zen-garden > P#extrap2 {background-image:url (.. /images/bg_face.jpg); Z-index:2; position:fixed; width:205px; bottom:0px; Background-repeat:no-repeat; Background-position:left Bottom; height:594px; left:0px}

What does the greater than sign in CSS mean?

For example, there is a P-layer that contains multiple span tags, with the following code:

<p> <span> loved ones </span> <span> exclusive memories </span> <span> without You </span> </p>

This is how the style should be defined with CSS:

P span {font:10px; color:blue;}

But at this point, you need to show the first span tag a different style, and the second <span> tag style unchanged. Would you like to put the first span in a P tag? The code is as follows:

<p> <p> <span> loved ones </span> </p> <span> exclusive memories </span> <span> without You </span > </p>

Unfortunately this is not possible because P span {...} The style works for all span tags below the p layer, whether it's a child tag or a grandchild's tag, so the style still works. The "greater than sign" in CSS is now used.

Now let's change the pattern to the following code:

p > span {font:10px; color:blue;}

This enables the first span label to be different from the other two displays. So we can know that the "greater than" function in CSS is: in nested tags, the style is used only for the label of the son's generation, not for the grandson's label.

However, there is a situation where the following code:

<p> <span> loved ones <span> jingle </span> </span> <span> exclusive memories </span> <span> without You </span> </p>

At this point, does this "greater than sign" still work? The answer is: No. Because this grandson's span tag inherits the span tag style of his son's generation.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!