选择器匹配元素后具有相同类的所有相似元素？

Question

我试图获取一个 CSS 选择器来匹配具有

.disabled

类名的元素，但仅限于具有

.today

类名的元素之后。它应该与下面示例中的第 11 天、第 12 天和第 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

类相同级别的元素：

.today ~ .disabled: {
  background: red
}

知道这是否可以做到吗？

Answer 1

你可以尝试这个（假设

month

元素总是兄弟）

.month:has(.today) ~ .month .disabled, /* select the days of the other months */
.today ~ .disabled { /* select the days inside the same month */
  background: red
}

<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 disabled">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>

Answer 2

你可以使用某些版本的

:has

并迭代DOM，但它会非常脆弱。

.week {
  outline: 1px solid grey;
  margin-bottom: .25em;
}

.month .week .today {
  background: lightgreen;
}

.month:has(.today)~.month .week .disabled {
  background: lightblue;
}

<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>