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，但由于中间有.wrapper .content:first-child div，我无法使用whatever。我怎么做的？

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;
}

检查 This

Answer 2

您可以像

一样使用

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

 }

Answer 3

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

.wrapper > div:first-child .content

我明确使用直接子选择器（>），否则.wrapper中的每个div都是它的父亲的第一个孩子（所以.whatever和.whatever2）将被选中

Answer 4

您可以通过多种方式执行此操作，具体取决于您的代码结构。现在我假设您正在遵循相同的结构。第一种方式：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

//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>

＆＃13;

Answer 5

每个人都如此亲密。如果您不想在两者之间指定div，则不需要。

.wrapper :first-child > .content

Plunker

中的示例

第一个有中间包裹dics的孩子

5 个答案: