如何编写CSS选择器匹配.today元素之后的所有.disabled元素？

需要编写CSS选择器，选中所有带.disabled类且位于.today元素之后的元素，目标是示例中的Day 11、Day 12和Day 13。

示例HTML代码 #

<div class="month">
  <div class="week">
    <div class="day disabled">Day 1</div>
    <div class="day disabled">Day 2</div>
    <div class="day disabled">Day 3</div>
    <div class="day today">Day 4</div>
    <div class="day">Day 5</div>
    <div class="day">Day 6</div>
    <div class="day">Day 7</div>
  </div>
</div>
<div class="month">
  <div class="week">
    <div class="day">Day 8</div>
    <div class="day">Day 9</div>
    <div class="day">Day 10</div>
    <div class="day disabled">Day 11</div>
    <div class="day disabled">Day 12</div>
    <div class="day disabled">Day 13</div>
    <div class="day">Day 14</div>
  </div>
</div>

尝试过的选择器（仅同层级生效） #

.today ~ .disabled {
  background: red
}

原选择器仅能匹配.today同一层级的后续元素，要实现跨容器（不同.month）的匹配，需要结合:has()伪类和兄弟选择器：

/* 匹配.today所在月份之后的所有月份中的.disabled元素 */
.month:has(.today) ~ .month .disabled,
/* 匹配.today同一周内后续的.disabled元素 */
.today ~ .disabled {
  background: red;
}

逻辑说明 #

1. month:has(.today)：选中包含.today的月份容器；
2. ~ .month：选中该容器之后的所有同级月份；
3. .disabled：选中这些后续月份里的目标元素；
4. 第二个选择器保留原逻辑，处理同一周内.today之后的.disabled。

兼容性说明 #

:has()伪类支持Chrome 101+、Firefox 121+、Safari 15.4+，如果需要兼容旧版浏览器，只能通过JavaScript先标记出.today之后的容器，再用CSS选择。

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