首页 > 解决方案 > CSS > 选择器传播到孩子之外?

问题描述

我以为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>

标签: css

解决方案


推荐阅读