第一个和最后一个孩子不使用类 div [重复]答案

【问题标题】：first- and last-child not working with class divs [duplicate]第一个和最后一个孩子不使用类 div [重复]
【发布时间】：2015-03-27 03:29:55
【问题描述】：

代码如下：

CSS：

div.colored {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid black;
}
div.colored:first-child {
    background-color: red;
}
div.colored:last-child {
    background-color: blue;
}    
div.nocolor {
    width: 300px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid black;
}

HTML：

<p>Test 1:</p>
<div>
<div class="colored"></div>
<div class="colored"></div>
</div>

<p>Test 2:</p>
<div>
<div class="nocolor"></div>
<div class="colored"></div>
<div class="colored"></div>
<div class="nocolor"></div>
</div>

第一个测试符合我的预期。第一个 div.colored 是红色，第二个（最后一个）是蓝色。在第二个测试中，有四个 div。第一个和最后一个 div.colored 没有颜色。我的 css 编码是否错误？

【问题讨论】：

对类实例使用 nth-of-type/first-of-type/last-of-type

标签： html css

【解决方案1】：

first-child 和 last-child 指的是父 div 的第一个和最后一个子级，而不是类的第一个和最后一个实例。所以在下面的 jsfiddle 中，.nocolor 是 div.parent1 的第一个和最后一个孩子。如果将中间的两个 .colored 包裹在 div.parent2 中，它们将成为 div.parent2 的第一个和最后一个孩子，它们将收到颜色。

http://jsfiddle.net/cbsteph/dtuhdnbe/

<div class="parent1">
 <div class="nocolor"></div>
    <div class="parent2">
        <div class="colored"></div>
        <div class="colored"></div>
    </div>
 <div class="nocolor"></div>
</div>

【讨论】：