问题
由于使用JavaScript动态添加额外元素,因此最后一个子项发生更改时样式不会更新.
例
点击下面代码段中的“添加更多块”.添加新块时,第四个.block元素(“Test block 4”)将没有底部红色边框,即使它不再是#container中的最后一个元素.
$("#addMore").one("click",function() {
$("#container").append($("#container").html());
$(this).remove();
});
.block {
border-bottom: 1px solid red;
counter-increment: block;
margin: 20px 0;
position: relative;
}
.block:after {
content: " " counter(block);
}
.block:last-child {
border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="block">Test block</div> <div class="block">Test block</div> <div class="block">Test block</div> <div class="block">Test block</div> </div> <div id="addMore">Add more blocks</div>
预期的行为
单击“添加更多块”后,除第八个块(“测试块8”)外,所有.block元素都应具有底部红色边框.
浏览器受影响
经过测试,无法在Chrome 55.0.2883.87 m中使用. IE 11.0.9600.18538和Firefox 50.1.0返回的预期行为.
可以在没有：
>使用JavaScript(即动态添加一个从最后一个元素中删除红色边框的类)？
>重组CSS以不使用last-child(即使用first-child和border-top)？
解决方法
对于它的价值,作为一种解决方法,你可以用nth-last-child(1)替换last-child伪类,它与last-child完全相同,但不受bug的影响.
$("#addMore").one("click",function() {
$("#container").append($("#container").html());
$(this).remove();
});
.block {
border-bottom: 1px solid red;
counter-increment: block;
margin: 20px 0;
position: relative;
}
.block:after {
content: " " counter(block);
}
.block:nth-last-child(1) {
border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="block">Test block</div> <div class="block">Test block</div> <div class="block">Test block</div> <div class="block">Test block</div> </div> <div id="addMore">Add more blocks</div>
