当最后一个孩子改变时,Chrome不会更新样式

Question

问题

last-child由于使用JavaScript动态添加额外元素而导致更改时,样式不会更新.

例

点击下面代码段中的"添加更多块".添加新块时,第四个.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小提琴

预期的行为

单击"添加更多块"后,除第八个块("测试块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替代)？

Answer 1

对于它的价值，作为一种解决方法，您可以替换last-child伪类，nth-last-child(1)该伪类的功能与最后一个子级完全相同，但不受该错误的影响。

$("#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>