javascript - 我如何告诉 CSS 重新计算 :first-of-type after DOM dynamically changes?

Question

我有以下 CSS 规则:

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

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

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

Answer 1

all divs are read as both first and last of the document

你误解了 :first-of-type 和 :last-of-type 的意思。

参见 the spec

Same as :nth-of-type(1). The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

重要的一点是其父元素的子元素 不是 文档。

你可以在这里看到它做得非常正确:

function middle() {
  var d = document.createElement("div");
  d.appendChild(document.createTextNode("inserted in middle"));
  var p = document.querySelector("div + div + div");
  p.parentNode.insertBefore(d, p);
}

function first() {
  var d = document.createElement("div");
  d.appendChild(document.createTextNode("inserted at top"));
  var p = document.querySelector("div");
  p.parentNode.insertBefore(d, p);
}

setTimeout(middle, 2000);
setTimeout(first, 4000);

div:first-of-type {
  border-top: 1px solid black;
}
div:last-of-type {
  border-bottom: 1px solid black;
}

<div>Original First</div>
<div>Original Second</div>
<div>Original Third</div>
<div>Original Fourth</div>
<div>Original Fifth</div>

您大概正在创建一个结构，例如:

<div>
    <div class="block"></div>
</div>
<div>
    <div class="block"></div>
</div>
<div>
    <div class="block"></div>
</div>

…其中该类的每个 div 都是其父元素中的第一个 div。

鉴于该布局，您将需要更类似于 :first-of-type > .block 的东西作为您的选择器。

您需要的选择器的确切性质取决于您正在创建的 DOM，但您尚未与我们分享。