javascript - 当使用相同类的每个后续元素也是第一个子元素时，如何使用特定类选择页面上的第一个元素？

Question

我正在制作斐波那契螺旋线。下面的代码。我需要创建螺旋的第二层(螺旋由一系列嵌套的 div 构成)并使用 for 循环创建多个层。我需要更改文件中具有 .item-one 类的第一个 div 元素的高度，没有后续具有 .item-one 类的 div。

我如何只选择第一个元素，记住还有 4 个类为 .item-one 的 div 元素，它们也是它们 parent 的第一个 child ，仅使用 CSS 和 vanilla JS？(我只需要更改第一个的高度，并需要所有其余的 .item-one div 具有不同的高度。)

我试过 :first-child 和 :first-of-type 但所有 .item-one 元素都是它们各自 parent 的第一个 child ，所以 :first-child 和 :first-of-type 选择所有.item-one 元素，而不仅仅是页面上的第一个元素。本帖select first element of the same class很接近，只是解决方案选择了所有第一个子元素，而我只想选择文件中具有该类的第一个 div。

代码:

HTML

<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four"></div>
    </div>
  </div>
</div>

JS

window.addEventListener('load', function() {

  var $items = document.getElementsByTagName("div");
  var $item = $items[0];
  var $cloned_item = $item.cloneNode(true);
  var $final_item = $items[$items.length - 1];

  for (var i = 1; i <= 5; i++) {
    $final_item.appendChild($cloned_item);
    $final_item = $items[$items.length - 1];
    $cloned_item = $item.cloneNode(true);
  }

});

最终结果看起来像这样。

<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four">
        <div class="item-one">
          <div class="item-two">
            <div class="item-three">
              <div class="item-four">
                <div class="item-one">
                  <div class="item-two">
                    <div class="item-three">
                      <div class="item-four">...and so on...</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您必须使用父元素才能挑出第一个子元素。我在这种情况下使用 body，但如果您有不同的 parent ，那么您会使用它。

body > .item-one {
  border: 1px solid red;
}

<div class="item-one">
  <div class="item-two">
    <div class="item-three">
      <div class="item-four">
        <div class="item-one">
          <div class="item-two">
            <div class="item-three">
              <div class="item-four">
                <div class="item-one">
                  <div class="item-two">
                    <div class="item-three">
                      <div class="item-four">...and so on...</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

或者更好的做法是只给那个外部 div 另一个类，如果可以的话就使用它。