2

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

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 类中的类 commentTop、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*/}

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

如果有任何区别，我想知道 CSS2 && CSS3 解决方案。谢谢！:)

4

1 回答 1

5

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

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

这仅选择.commentTop,.commentMiddle并且.commentBottom直接嵌套在其中.commentCompany（在您所谓的“实际范围”内）。请参阅此答案以获取说明。

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

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

于 2013-08-07T18:06:31.463 回答