问题

Question

问题

由于使用JavaScript动态添加额外元素，last-child发生更改时，样式不会更新。

实施例

点击＆＃34;添加更多块＆＃34;在下面的代码段中。添加新块时，第四个.block元素（＆＃34;测试块4＆＃34;）将没有底部红色边框，即使它不再是#container中的最后一个元素。 / p>

＆＃13;

$("#addMore").one("click", function() {
  $("#container").append($("#container").html());
  $(this).remove();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

JS Fiddle

预期行为

点击＆＃34;添加更多块＆＃34;所有.block元素都应该有一个底部红色边框，除了第八个块（＆＃34;测试块8＆＃34;）。

浏览器受影响

已在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)，它与last-child完全相同，但不受该bug的影响。

＆＃13;

$("#addMore").one("click", function() {
  $("#container").append($("#container").html());
  $(this).remove();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我在Chrome 55.0.2883.87中进行了测试，这让我感到困惑 - 显然是一个错误。

即使我在.html()上使用{{3}}，问题仍然存在：

$("#container").append($("#container > .block").clone());

可能的修复可能是强制 重新呈现 container - 我用它来重新渲染：

$('#container').hide().show(0);

见下面的演示：

＆＃13;

$("#addMore").one("click", function() {
  $("#container").append($("#container > .block").clone());
  // fix: by forcing re-rendering
  $('#container').hide().show(0);
  $(this).remove();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

对此问题进行一些介绍提示Chrome浏览器中存在一些错误。

但是我注意到，如果我们使用border-top代替border-bottom，那么它可以正常运行。

<强> CSS：

.block:not(:first-child) {
  border-top: 1px solid red;
}

＆＃13;

$("#addMore").one("click", function() {
	$("#container").append($("#container").html());
	$(this).remove();
});

＆＃13;

.block {
  counter-increment: block; 
  padding: 20px 0;
  position: relative;
  margin-bottom: 1px;
}
.block:after {
  content: " " counter(block);
}
.block:not(:first-child) {
  border-top: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

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

问题

实施例

预期行为

浏览器受影响

3 个答案: