How to use CSS parent-child

When we are working on a front-end project, we must clarify the parent relationship between element modules, so that we can maintain and find and use elements more conveniently. Let me give you a good introduction today.

Simply speaking, CSS parent CSS child is relative. For example, a DIV "A" is wrapped by another DIV "B", so we can think that B is the parent of A. The same reason applies.

Parent-child or sometimes the DIV nested relationship is compared to the father-son relationship. This is for ease of understanding. The image of the DIV nested relationship is compared to the parent-child relationship.

, example:

DIV CSS parent-child description example:

CSS code

.yangshi{...} 
.yangshi .yangshi_a{ ...} 
.yangshi .yangshi_b{ ...}

Div code

<div class="yangshi"> 
<div class="yangshi_a">内容a</div> 
<div class="yangshi_b">内容b</div> 
</div>

above Here in the div+css code, we can think that the parent (upper level) of yangshi_a is yangshi.

So we can use CSS pointersAttributesIn div css, the final CSS style can have the same named Attribute selector, But given different values.

In this way, we can know that the parent of yangshi_a is yangshi by looking at .yangshi .yangshi_a

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to php Chinese website Other related articles!

Related reading:

How to use the transform gradient attribute in Css3

Steps to implement the effect of creating a dynamic switch in Css3

Steps to optimize HTML5 forms with CSS3

The above is the detailed content of How to use CSS parent-child. For more information, please follow other related articles on the PHP Chinese website!