问题
由于使用JavaScript动态添加了额外的元素,当last-child
更改时,样式不会更新。
示例
点击下面代码片段中的“添加更多块”。当添加新块时,第四个.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>
预期行为
点击“Add more blocks”后,所有.block
元素都应该有一个底部红色边框 *,除了 * 第八个块(“Test block 8”)。
影响的浏览器
已在Chrome 55.0.2883.87 m中测试但无法正常工作。IE 11.0.9600.18538和Firefox 50.1.0返回的预期行为。
这个问题可以解决 * 没有 *:
- 使用JavaScript(即动态添加一个类,删除最后一个元素的红色边框)?
- 重新构造CSS以不使用
last-child
(即使用first-child
和border-top
代替)?
4条答案
按热度按时间ycl3bljg1#
作为一种变通方法,您可以将
last-child
伪类替换为nth-last-child(1)
,它与last-child做的事情完全相同,但不受该错误的影响。lvmkulzt2#
我在Chrome 55.0.2883.87中进行了测试,它让我感到困惑-显然是一个bug。
即使我在
.html()
上使用.clone()
,问题仍然存在:字符串
一个可能的 * 修复 * 可能是 * 强制 *
container
的 * 重新渲染 *-我用这个来重新渲染:型
请参见下面的演示:
ha5z0ras3#
稍微处理一下这个问题就暗示了Chrome浏览器中存在一些错误。
但是我注意到,如果我们使用
border-top
而不是border-bottom
,那么它就可以正常工作。CSS:
字符串
34gzjxbg4#
我在使用css样式
td:last-child
和border-right向表中动态添加行时也遇到过类似的问题,当页面首次加载时它可以工作,但一旦额外的<tr>
元素被添加到表中,新的和现有的行有时会呈现为没有右边框。我把它换成了
td:last-of-type
,它看起来工作得很好。