Javascript 如何使用特定类设置紧跟在另一个跨度之后的跨度的样式

我有一个div和100个跨度内的s2类和一个跨度内的s1类。这个s1跨度可以在div中的任何位置。我只想将css应用于s1之后的第一个s2跨度。如何在css中实现它

<div>
    <span class="s2"></span>
    <span class="s2"></span>
    <span class="s2"></span>
    <span class="s2"></span>
    <span class="s1"></span>
    <span class="s2"></span> <<- i want to style this span
    <span class="s2"></span>
    <span class="s2"></span>
    <span class="s2"></span>
    .
    .
    .
    .
    .
    <span class="s2"></span>
</div>

有几种方法：

在CSS中，您可以执行以下操作：

  .s2:nth-child(5) {}       /* get any .s2 that is the 5th child within its parent */
  .s2:nth-last-child(4) {}  /* get any .s2 that is the 4th from last child within its parent */
  .s1 + .s2 {}              /* get any .s2 that immediately follows an .s1 */

  document.querySelector(".s2:nth-child(5)").style.....;
  document.querySelector(".s2:nth-last-child(4)").style.....;
  document.querySelector(".s1 + .s2").style.....;

在JavaScript中，您可以执行以下操作：

  .s2:nth-child(5) {}       /* get any .s2 that is the 5th child within its parent */
  .s2:nth-last-child(4) {}  /* get any .s2 that is the 4th from last child within its parent */
  .s1 + .s2 {}              /* get any .s2 that immediately follows an .s1 */

  document.querySelector(".s2:nth-child(5)").style.....;
  document.querySelector(".s2:nth-last-child(4)").style.....;
  document.querySelector(".s1 + .s2").style.....;

这些都假设所有这些元素之间的层次关系是静态的

了解有关选择器的更多信息
您可以使用CSS3运算符

.s1~.s2:n类型（1）

您可以使用

这称为相邻选择器或下一个同级选择器。它将只选择紧跟在前一个指定元素之后的指定元素


.s1+.s2{
颜色：红色
}

1.
1.
1.
1.
2.
1.
1.
1.
1.
1.

图元+图元选择器用于选择放置的图元
紧跟在第一个指定元素之后（不在内部）

.s1+.s2{}
将在您的情况下工作。这也会选择
.s2
之后的所有
.s1
元素。问题是如何只选择下一个
.s2
元素。尝试在s2之后添加：第n个类型（1），您甚至不需要使用JavaScript；这些都是CSS中的有效选择器，这是OP要求的……没错，但问题被标记为“JavaScript”，所以我提供了一个涵盖这两者的答案。