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

Question

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

我如何只选择第一个，记住将有另外 4 个 div 元素与类 .item-one 也是他们父母的第一个孩子，只使用 CSS 和 vanilla JS？ （我只需要更改第一个的高度，并且需要将所有其余的 .item-one div 设置为不同的高度。）

我试过 :first-child 和 :first-of-type 但所有 .item-one 元素都是它们各自父母的第一个孩子，所以 :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，但如果你有不同的父级，那么你会使用它。

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 另一个类，如果可以的话就使用它。

Answer 2

这就是你要找的吗？

div {border: 1px solid blue;}
.item-one {border: 1px solid yellow;}
body > .item-one {border: 2px 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>

---

@LGSon 睁开眼睛后编辑。

Answer 3

您可以使用 > 选择器将样式应用于具有 .item-one 类的父级的直接第一个子级。如果您没有所有这些元素的父级，那么应该使用主体。

body>.item-one {
    /* Styling here */
    padding: 5px;
    margin: 5px;
    border: 5px black solid;
}