html - 元素的直接子元素和直接子元素有什么区别

Question

类 altfoo 的 div 是类 foo 的 div 的直接子代吗？为什么或者为什么不？我很困惑，直系 child 和直系 child 是同一个意思吗？

<div class="foo">
  <!-- 1 -->
  <p></p>
   <!-- 2 -->
  <p></p>
  <div class="altfoo">
    <!-- 3 -->
    <p></p>
 </div>
</div>

Answer 1

是的，“直系子代”和“直系子代”是同一个意思，你的元素.altfoo是 .foo 的直接子代.这可以通过 child combinator > 确认:

.foo > .altfoo {
  color: red;
}

<div class="foo">
  <!-- 1 -->
  <p></p>
   <!-- 2 -->
  <p></p>
  <div class="altfoo">
    <!-- 3 -->
    Altfoo
    <p></p>
 </div>
</div>

<p></p>在你的例子中只是一个 sibling of .altfoo , 它也是 .foo 的直接子代.

直接子元素是在层次结构方面紧接父元素的子元素。也就是说，不是孙辈或曾孙辈。

例如，注意当一个元素分隔层次结构中的两个元素时，.foo > .altfoo CSS 选择器不再以元素为目标:

.foo > .altfoo {
  color: red;
}

<div class="foo">
  <div class="middle">
    <div class="altfoo">
      Altfoo
    </div>
  </div>
</div>