Select N 个与所选元素相关的下一个兄弟姐妹（附有唯一 class）使用 CSS（LESS）

Question

我有下面的 HTML 代码。比方说，我可以通过单击每个跨度来附加 selected-day class。我正在尝试 select 接下来的 6 个兄弟姐妹，从具有 class selected-day 的元素开始。这是我想出的：

#calendar span.day.selected-day {
  background-color: red;
  ~ span:nth-child(n + 6):nth-child(-n + 15) {
    background-color: red;
  }
}

<div id="calendar">
 <span class="day">1</span>
 <span class="day">2</span>
 <span class="day">3</span>
 <span class="day">4</span>
 <span class="day">5</span>
 <span class="day selected-day">6</span>
 <span class="day">7</span>
 <span class="day">8</span>
 <span class="day">9</span>
 <span class="day">10</span>
 <span class="day">11</span>
 <span class="day">12</span>
 <span class="day">13</span>
 <span class="day">14</span>
 <span class="day">15</span>
 <span class="day">16</span>
</div>

虽然它在开头正确突出显示了 selected 天：

每当我更改 selection 时，它都不遵循：

是否有任何正确的方法总是 select 与具有给定 class 的元素相关的下一个 6 兄弟？

Answer 1

它看起来并不优雅，但您可以简单地添加多个选择器。由于我不使用 less 我用原生 css

编写示例

#calendar span.day.selected-day + span,
#calendar span.day.selected-day + span + span,
#calendar span.day.selected-day + span + span + span,
#calendar span.day.selected-day + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span + span {
    background-color: red;
}

编辑：我在 LESS 中尝试过

#calendar span.day.selected-day {
  background-color: red;
  + span,
  + span + span,
  + span + span + span,
  + span + span + span + span,
  + span + span + span + span + span,
  + span + span + span + span + span + span
  {
    background-color: red;
  }
}

Select N 个与所选元素相关的下一个兄弟姐妹（附有唯一 class）使用 CSS（LESS）

Select N next siblings in relation to the selected element (with unique class attached) using CSS (LESS)

html

css

less