Question

我想知道如何在实际范围内选择第一个孩子，让我举个例子让你能够正确理解我的问题：

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>

CSS首先出现在我的脑海中，影响了commentTop，commentMiddle，commentBottom在commentCompany类中但只在直接范围内是这样的：

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

但是有两个问题：第一个孩子更像是第一类元素的类型（不是真正的第一个孩子的类）（必须使用nth-child），而主要问题：它也影响嵌套注释 - 这不是公司的评论 - 所以如何只获得commentCompany的直接范围？

我想知道CSS2＆amp;＆amp; CSS3解决方案，如果有任何区别。谢谢！：） 的

Answer 1

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

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

这仅选择直接嵌套在.commentTop内的.commentMiddle，.commentBottom和.commentCompany（在您所谓的“实际范围”内）。有关说明，请参阅this answer。

使用空格，后代组合子，意味着您正试图让其父项的每个第一个子项嵌套在.commentCompany中。将它与您的班级选择器相结合，您将获得各种意想不到的结果。

儿童组合子是CSS2的一部分;没有CSS3解决方案。

CSS：在ACTUAL SCOPE中选择第一个孩子

1 个答案: