我认为parent > child
仅针对孩子而不是大孩子元素。
body {
font-size: 16px;
}
.child {
border-color: green;
}
.grandchild {
border-color: blue;
}
.great-grandchild {
border-color: purple;
}
/* SHOULDN'T THIS TARGET ONLY THE IMMEDIATE CHILDREN ? */
.parent > div {
font-size: 32px;
background: #DDD;
}
div {
padding: 10px;
border: 1px solid black;
margin: 5px;
}
<div class="parent">
PARENT Font size = 16px as defined by body{}
<div class="child">
CHILD: Font size: 32px (as expected)
<div class="grandchild">
GRANDHCHILD:<br> Shouldn't font-size = 16px?
</div>
<div class="grandchild">
GRANDHCHILD:<br> Shouldn't font-size = 16px?
</div>
<div class="grandchild">
GRANDHCHILD:<br> Shouldn't font-size = 16px?
<div class="great-grandchild">
great grand child<br> Shouldn't font-size = 16px?
</div>
</div>
</div>
</div>