Html 使用CSS（较少）选择与所选元素（附加唯一类）相关的N个下一个同级元素

我有下面的HTML代码。比方说，我可以通过单击每个跨度来附加所选的day类。我正在尝试选择接下来的6个同级，从选定日期的类元素开始。 以下是我的想法：

日历span.day.selected-day{ 背景色：红色； ~span:n个孩子n+6:n个孩子n+15{ 背景色：红色； } } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 11 12 13 14 15 16

---

它看起来并不优雅，但你可以简单地添加多个选择器。因为我没有使用更少的css，所以我用原生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;
}

编辑：我试了几次

#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;
  }
}

---

只是一个建议，如果你要切换。选定的一天，为什么不做同样的结束。比如起点/终点。通过这种方式，您可以将选定的日期涂成红色，.选定的日期~span.day，然后涂成黑色。结束日期~span.day。这是一种有趣的方式！谢谢你的建议！