从 2 级以上选择第 n 个孩子答案

【问题标题】：select nth child from 2 levels up从 2 级以上选择第 n 个孩子
【发布时间】：2022-08-12 18:59:59
【问题描述】：

我有一个这样的html结构：

<div class=\'parent\'>
  <div class=\'row\'>
    <div class=\'button\'>
      button
    </div>
    <div class=\'button\'>
      button
    </div>
  </div>
  <div class=\'row\'>
    <div class=\'button\'>
      button
    </div>
    <div class=\'button\'>
      button
    </div>
  </div>
</div>

所以我们有父级 -> 行 -> 按钮，1 个父级，2 行，每行有 2-4 个按钮。是否有我可以使用的 css 选择器（如 nth-child），但它将所有按钮视为兄弟姐妹（即使它们位于不同的行中）？就像是：

.parent .child:nth-child(randomNum) {

}

其中 randomNum 是一个介于 1 和 numOfTotalButtons.length 之间的数字

你想要什么？更多解释
@RobinHood 我认为这个问题很清楚

标签： html css

【解决方案1】：

使用兄弟选择器~。

.row ~ .row > .button {
  color: hotpink;
}

.row ~ .row ~ .row > .button {
  color: blue;
}

<div class='parent'>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
</div>

【讨论】：

这很有帮助，但我一直在寻找（正如我的问题标题所说）from 2 levels up

【解决方案2】：

恐怕仅使用 CSS 是不可能的。您可以使用 jQuery 或纯 Javascript 进行归档：

//jQuery
$(".button").eq(0).css("color", "red");
$(".button").eq(1).css("color", "green");
//pure javascript
document.querySelectorAll(".button")[2].style.color = "blue";
document.querySelectorAll(".button")[3].style.color = "pink";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

“是否有我可以使用的 css 选择器（例如 nth-child），但它将所有按钮视为兄弟姐妹（即使它们位于不同的行中）？”

是的，类选择器。除此之外，您是否需要解决任何其他要求和/或情况？
.button {
  outline: red 3px solid;
}
<div class='parent'>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
  <div class='row'>
    <div class='button'>
      button
    </div>
    <div class='button'>
      button
    </div>
  </div>
</div>

【讨论】：