About the use of the greater than sign in CSS styles and the inheritance method in CSS

Inheritance brings certain troubles to our programs, so we should study the principles of inheritance seriously. Here is a good example and a method of handling inheritance. Interested friends can refer to

Inheritance To a certain extent, it makes the program more convenient in the process of writing, but sometimes it also brings certain troubles to our program, so it is important to carefully study the principles of inheritance and how to deal with it. The following is a way to handle inheritance in CSS.

I saw a greater than sign (>) in a piece of CSS code. 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?

Example: There is a p layer containing multiple span tags, the code is as follows:

<p> 
<span>亲人</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

At this time, use CSS to define it The style should be like this:

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

But at this time, the first span tag needs to be displayed in a different style, and the styles of the last two tags remain unchanged ,How to do it? Is it okay to put the first span into a p tag? The code is as follows:

<p> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

Unfortunately, this is not possible, because the p span {...} style works on all span tags under the p layer. It doesn't matter if it's a child tag or a grandchild tag, so the style still works. At this time, the "greater than sign" in CSS is used.

Now let’s change this style. The code is as follows:

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

In this way, the first span tag and the other two displays can be realized Different styles. So we can know that the function of the "greater than" sign in CSS is: in nested tags, the style only applies to the tags of the son generation, not the tags of the grandchild generation.

But there is still such a situation, the following code:

<p> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

At this time, will the "greater than sign" still work? The answer is: no. Because the span tag of this grandchild inherits the span tag style of the son.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of inherit usage in CSS

Override rules of CSS styles

The above is the detailed content of About the use of the greater than sign in CSS styles and the inheritance method in CSS. For more information, please follow other related articles on the PHP Chinese website!