如何使CSS中的第一个孩子正常工作？

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 ），您提供的选择器将始终匹配; 相反，您需要最后一个.row元素的div.article-container子代：

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{
background-color: white;
}

使用row:last-child而不是div.article-container:last-child div.article-container:last-child将选择该类的所有div，因为每行只有1个div.article-container

:first-child :last-child :nth-child选择器仅在具有相同类/ id的元素嵌套在父元素中时才起作用...并且它们是那里唯一的选择器。

例如，这将工作。

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

这是行不通的：

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

Answer 4

在.row上使用最后一个子选择器，并设置background-color: white; 给它的孩子.article-container 。 以下是一个例子。

 div.article-container { background-color: red; } .row:last-child .article-container { /* Change color as desired */ background-color: white; } 

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

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