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

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会影响commentCompany类中的classesTop,commentMiddle,commentBottom,但只有在直接范围内才是这样:

.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),主要问题是:它也影响嵌套注释 -不是公司的评论 - 所以如何才能获得评论公司的直接范围？

如果有任何不同,我想知道CSS2 && CSS3解决方案.谢谢!:)

Answer 1

你想要子组合子>,而不是:first-child或者:nth-child()伪类:

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

这只会选择.commentTop,.commentMiddle并.commentBottom直接嵌套在.commentCompany(在你所谓的"实际范围"内).请参阅此答案以获取说明.

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

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