如何为带有.active类元素与hover状态元素之间的元素设置样式？

需求描述 #

需要给位于带.active类的元素和处于hover状态的元素之间的所有组件添加灰色背景样式。当鼠标悬停在第六个元素（示例中为“5”）上时，从带有.active类的“1”元素到该hover元素之间的所有元素都要变为灰色，效果如下：

实现方案 #

我们可以利用CSS的:has()选择器（需浏览器支持）结合通用兄弟选择器来精准选中目标元素，同时保留原有样式的优先级。以下是完整代码：

HTML 代码 #

<div class="container">
  <div class="day">-1</div>
  <div class="day">0</div>
  <div class='day active'>1</div>
  <div class="day">2</div> 
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
</div>

CSS 代码 #

/* 容器用于包裹所有日期元素，方便选择器定位 */
.container {
  display: flex;
  gap: 6px;
}

.day {
  border: 1px solid #333;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 初始状态下.active元素的样式 */
.active {
 background: blue;
 color: white;
}

/* 单个元素hover时的基础样式 */
.day:hover {
  background: #ccc;
}

/* 核心逻辑：当容器内存在.active之后的hover元素时，选中.active到hover之间的所有元素 */
.container:has(.active ~ .day:hover) .active,
.container:has(.active ~ .day:hover) .active ~ .day:not(.day:hover ~ .day) {
  background: #ccc;
  color: black;
}

代码说明 #

1. 用.container包裹所有.day元素，便于通过:has()检测内部元素状态；
2. :has(.active ~ .day:hover)用于判断容器内是否存在位于.active之后的hover元素；
3. .active ~ .day:not(.day:hover ~ .day)精准选中.active之后、hover元素之前的所有元素，结合.active本身，共同设置灰色背景；
4. 保留单个元素hover的基础样式，同时覆盖.active的原有蓝色样式，实现需求效果。

内容的提问来源于stack exchange，提问作者anokhindev