第一个患有中间包装DIC的孩子

Question

我有以下HTML代码：

<div class="wrapper">
  <div some_unique_identifier class="whatever">
    <div class="content">
  </div>
  <div some_unique_identifier2 class="whatever2">
    <div class="content">
  </div>
</div>

我只想对content类的第一个Div进行样式化，但是由于中间的whatever DIVS，我无法使用.wrapper .content:first-child。我怎么做？

Answer 1

我认为您只需要首先出现内容类的样式。据我所知，您无法使用CSS进行。因为在CSS中，伪造将获得直接父母的第一个孩子（如果您使用的话：第一个孩子）。

<div class="wrapper">
  <div some_unique_identifier class="whatever">
    <div class="content">1</div>
  </div>
  <div some_unique_identifier2 class="whatever2">
    <div class="content">2</div>
  </div>
</div>

使用jQuery或JavaScript：

$('.content').first().addClass('first-content');

和CSS：

.first-content{
  background:red;
}

检查此

Answer 2

您可以简单地使用

.wrapper > div > .content:first-child{
 }

Answer 3

好吧，使用第一个或第一个div ..

.wrapper > div:first-child .content

我明确使用直接儿童选择器（>），否则.wrapper中的每个DIV是其父母的第一个孩子（因此也将选择.whatever和.whatever2）

Answer 4

您可以根据代码结构多种方式执行此操作。现在，我假设您遵循的结构相同。第一种方法：

.content:first-child {
    background: red;
}

<div class="wrapper">
  <div some_unique_identifier class="whatever">
    <div class="content">
      Content 1
  </div>
    <div class="content">
      Content 1 2nd child
  </div>
  <div some_unique_identifier2 class="whatever2">
    <div class="content">
      Content 2
  </div>
    <div class="content">
      Content 2 2nd child
  </div>
</div>

.wrapper div > div.content:first-child {
    background: red;
}

//Another way:
<div class="wrapper">
  <div some_unique_identifier class="whatever">
    <div class="content">
      Content 1
  </div>
    <div class="content">
      Content 1 2nd child
  </div>
  <div some_unique_identifier2 class="whatever2">
    <div class="content">
      Content 2
  </div>
    <div class="content">
      Content 2 2nd child
  </div>
</div>

Answer 5

每个人都很接近。如果您不想指定之间的div，则不需要。

.wrapper :first-child > .content

plunker中的示例