CSS:在实际范围内选择第一个 child

Question

我想知道如何在实际范围内选择first-child，举个例子让你正确理解我的问题:

HTML:

<div class="comment commentCompany">
  <div class="commentTop"></div>
  <div class="commentMiddle">
    Text of comment level two comment.
    <div class="comment">
      <div class="commentTop"></div>
      <div class="commentMiddle">
        Text of comment level three.
        </div>
      <div class="commentBottom"></div> 
    </div>
    </div>
  <div class="commentBottom"></div> 
</div>

我首先想到的影响 commentCompany 类中的类 commentTop、commentMiddle、commentBottom 的 CSS，但仅在直接范围内是这样的:

.commentCompany .commentTop:first-child{/*affect company's .commentTop*/}
.commentCompany .commentMiddle:first-child{/*affect company's .commentMiddle*/}
.commentCompany .commentBottom:first-child{/*affect company's .commentBottom*/}

但是有两个问题::first-child 更像 first class 的元素类型(不是真正的类的 first-child)(必须使用 nth-child)，以及主要问题 :它还会影响嵌套评论 - 这不是公司的评论 - 那么如何只获得 commentCompany 的直接范围？

我想知道 CSS2 && CSS3 解决方案是否有任何区别。谢谢! :)

Answer 1

您需要子组合器 >，而不是 :first-child 或 :nth-child() 伪类:

.commentCompany > .commentTop
.commentCompany > .commentMiddle
.commentCompany > .commentBottom

这只会选择直接嵌套在 .commentCompany 中的 .commentTop、.commentMiddle 和 .commentBottom(在你所谓的“实际范围内”)。参见 this answer举例说明。

使用空格，即后代组合器，意味着您正在尝试获取嵌套在 .commentCompany 中的其父项的每个第一个子项。将它与你的类选择器结合起来，你会得到各种意想不到的结果。

子组合器是 CSS2 的一部分；没有纯 CSS3 的解决方案。