CSS 选择：在祖先类中的第 n 个项目之间切换

Posted 2023-03-06

【中文标题】CSS 选择：在祖先类中的第 n 个项目之间切换

【英文标题】：CSS Selection: toggling between nth items within an ancestor class

【发布时间】：2022-01-23 20:04:57

【问题描述】：

我在一个共同的祖先中有两个嵌套类，例如：

<div class="css-18e3th9">
  <div class="x1">
    <div class="x2">
    ..
      <div class="css-t0qh0m">
      </div>
    ..
    </div>
  </div>
  ..

  ..
  <div class="x1">
    <div class="x2">
    ..
      <div class="css-t0qh0m">
      </div>
    ..
    </div>
  </div>

</div>

在共同祖先 (css-18e3th9) 和目标类之间有很多 div 和类：css-t0qh0m。我无法计算所有中间类，它们可能会随着时间动态变化。

我正在尝试以不同的方式设置目标类css-t0qh0m 的样式。如何独立选择每个？目前只有两个目标类，但未来可能会更多。

【问题讨论】：

通常你会为这两个/全部分配一个单独的 id="somethingunique" ，然后基于它的样式（#somethingunique color: blue; ），但我得到的印象是你可能无法控制标记?

@Raxi 正确 - 我必须在生成后调整标记。

据我所知，那时仅使用 CSS 是不可能的，因为没有什么可以锚定的，虽然它们确实有一个共同的祖先，但它们没有共享一个父对象，因此通常的::nth-child-type 选择器在这里不是一个选项。但是，如果您愿意，可以使用 javascript 来完成。

@Raxi 感谢您的帮助。是否可以在整个文档中选择第 n 个id？例如，如果他们都共享相同的 id，并且他们是唯一的两个 divs 这样做？

id 属性可能永远不会重复。有nth-last-of-type-selectors 之类的，但没有一个适合你在这里的场景，（例如，选择器没有与类组合，所以它会根据 all @ 987654332@s，不只是 css-t0qh0m 的）

【参考方案1】：

正如 cmets 中所述，我认为没有纯 CSS 方法可以实现这一点（因为 html 标记无法控制）。 如果您能够添加 javascript，那么这样的事情应该可以解决问题：

let items = document.querySelectorAll('div.css-18e3th9');
for (let i = 0; i < items.length; ++i) 
  items[i].id = 'autorenamed-css-' + (i + 1);

这会给第一个div.css-18e3th9 一个id=autorenamed-css-1 属性，下一个id=autorenamed-css-2，等等。这样您就可以应用您的样式，例如

#autorenamed-css-1  background-color: red;  
#autorenamed-css-2  background-color: blue;