Question

以下是代码：

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是红色，第二个（last）是蓝色。在第二次测试中，有四个div。第一个和最后一个div.colored没有着色。我错误地编写了我的css吗？

Answer 1

first-child和last-child引用父div的第一个和最后一个子节点，而不是类的第一个和最后一个实例。所以在下面的jsfiddle中，.nocolor是div.parent1的第一个和最后一个子节点。如果你将div.parent2中的两个.colored包裹起来，它们将成为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>

第一个和最后一个孩子不使用类div

1 个答案: