Question

我想删除上一篇文章容器中的红色背景。无论如何这里是我正在尝试的HTML代码......

<section id="intro" class="intro text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12 wp1 animated fadeInLeft">
                <div class="col-md-8 col-md-offset-2 article-container">
                    text 1
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 wp1 animated fadeInLeft">
                <div class="col-md-8 col-md-offset-2 article-container">
                    text 2
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 wp1 animated fadeInLeft">
                <div class="col-md-8 col-md-offset-2 article-container">
                    text 3
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 wp1 animated fadeInLeft">
                <div class="col-md-8 col-md-offset-2 article-container">
                    text 4
                </div>
            </div>
        </div>
    </div>
</section>

我的css我想做的就是这个

div.article-container {
    background-color: red;
}

div.article-container:last-child {
    background-color: white;
}

这有什么css代码吗？

谢谢！

Answer 1

使用此代码，我认为它可以帮助您

.row:last-child .article-container {
            background-color: white;
        }

Answer 2

鉴于此，在发布的HTML中，div.article-container元素是其父元素的唯一子元素，因此其父元素的:last-child（以及:first-child）选择器你供应总是匹配;相反，您需要最后div.article-container元素的.row子元素：

div.row:last-child div.article-container {
    background-color: white;
}

div.article-container {
  background-color: red;
}
div.row:last-child div.article-container {
  background-color: white;
}

<section id="intro" class="intro text-center">
  <div class="container">
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 1
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 2
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 4
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

请参阅此处jsfiddle

css代码：

row:last-child

使用div.article-container:last-child代替div.article-container:last-child div.article-container将选择该类的所有div，因为每行只有:first-child

:last-child :nth-child <parent> <elem> <elem> <elem> <elem> </parent>选择器仅在具有相同类/ ID的元素嵌套在父元素中时才有效...并且它们是唯一的元素。

因为这样可行。

<parent>
  <elem>
  <elem>
  <elem>
  <elem>
  <other element>
</parent>

这不会起作用

<parent>
  <elem>
</parent>
<parent>
  <elem>
</parent>
<parent>
  <elem>
</parent>
<parent>
  <elem>
</parent>

这可行，但不是您想要的

elem:first-child

elem:first-child将选择同一父母中的第一个孩子;所以在这种情况下（如在你的情况下）elem:last-child将返回所有元素，与elem:nth-child(n)或Bug.joins(:status).group('statuses.desc').count

相同

Answer 4

在background-color: white;上使用最后一个子选择器，并将.article-container设置为其子div.article-container { background-color: red; } .row:last-child .article-container { /* Change color as desired */ background-color: white; }。以下是一个例子。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="intro" class="intro text-center">
  <div class="container">
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 1
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 2
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 wp1 animated fadeInLeft">
        <div class="col-md-8 col-md-offset-2 article-container">
          text 4
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

{{1}}

＆＃13;

Answer 5

我为您创建了一个JSfiddle，以向您展示一个有效的示例。

<强> HTML：

<section id="intro" class="intro text-center">
<div class="container">
    <div class="row">
        <div class="col-md-12 wp1 animated fadeInLeft">
            <div class="col-md-8 col-md-offset-2 article-container">
                text 1
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 wp1 animated fadeInLeft">
            <div class="col-md-8 col-md-offset-2 article-container">
                text 2
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 wp1 animated fadeInLeft">
            <div class="col-md-8 col-md-offset-2 article-container">
                text 3
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 wp1 animated fadeInLeft">
            <div class="col-md-8 col-md-offset-2 article-container">
                text 4
            </div>
        </div>
    </div>
</div>
</section>

<强> CSS：

div.article-container {
    background-color: red;
}

div.row:last-child .article-container {
    background-color: white;
}

Answer 6

选择器将是

.section .row:last-child .article-container

Answer 7

http://codepen.io/nehemc/pen/yJbjQy

.article-container { background-color: red; }
#intro .row:last-child .article-container { background-color: transparent; }

Answer 8

它不会那样工作。

.intro .row:last-child .article-container {
  background-color: transparent;
}

因为您只能针对第n个样式定位直接子项。

Answer 9

.row {
    background-color: red;
}

.row:last-child {
    background-color: white;
}

如何让我的第一个孩子在CSS中正常工作？

9 个答案: