Javascript 如何告诉CSS重新计算：DOM动态更改后的第一个类型？

我有以下CSS规则：

        .block:first-of-type{
            border-top: 1px solid black;
        }

        .block:last-of-type{
            border-bottom: 1px solid black;
        }

这个

.block

div是通过AJAX生成的，可以多次添加到页面中。问题是，每次我添加其中一个div时，所有div都被读取为文档的第一个和最后一个。我认为这是因为CSS无法识别DOM中发生的更改。我该如何解决这个问题

所有div都被读取为文档的第一个和最后一个

您误解了

：类型的第一个
和
：类型的最后一个
的意思

看

与第n种类型（1）相同。：first of type伪类表示一个元素，该元素在其父元素的子元素列表中是其类型的第一个同级元素

重要位是其父元素的子元素，而不是文档

您可以在此处看到它的操作非常正确：


函数中间（）{
var d=document.createElement（“div”）；
d、 appendChild（document.createTextNode（“插入中间”）；
var p=document.querySelector（“div+div+div”）；
p、 parentNode.insertBefore（d，p）；
}
函数优先（）{
var d=document.createElement（“div”）；
d、 appendChild（document.createTextNode（“插入顶部”）；
var p=文件查询选择器（“div”）；
p、 parentNode.insertBefore（d，p）；
}
setTimeout（middle，2000）；
setTimeout（第一个，4000）
div：类型的第一个{
边框顶部：1件纯黑；
}
div：类型的最后一个{
边框底部：1px纯黑；
}
原版优先
原秒
原第三
原第四
原第五版
所有div都被读取为文档的第一个和最后一个

您误解了
：类型的第一个
和
：类型的最后一个
的意思

看

与第n种类型（1）相同。：first of type伪类表示一个元素，该元素在其父元素的子元素列表中是其类型的第一个同级元素

重要位是其父元素的子元素，而不是文档

您可以在此处看到它的操作非常正确：


函数中间（）{
var d=document.createElement（“div”）；
d、 appendChild（document.createTextNode（“插入中间”）；
var p=document.querySelector（“div+div+div”）；
p、 parentNode.insertBefore（d，p）；
}
函数优先（）{
var d=document.createElement（“div”）；
d、 appendChild（document.createTextNode（“插入顶部”）；
var p=文件查询选择器（“div”）；
p、 parentNode.insertBefore（d，p）；
}
setTimeout（middle，2000）；
setTimeout（第一个，4000）
div：类型的第一个{
边框顶部：1件纯黑；
}
div：类型的最后一个{
边框底部：1px纯黑；
}
原版优先
原秒
原第三
原第四
原始第五个
我找到了一个解决方案，实际上有点复杂，但您的输入解决了问题的初始部分。我找到了一个解决方案，实际上有点复杂，但您的输入解决了问题的初始部分。