javascript – 当last-child更改时,Chrome不会更新样式

问题

由于使用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>

JS Fiddle

预期的行为

单击“添加更多块”后,除第八个块(“测试块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>