css - 如何在具有不同父元素的特定 (.selected) 元素之后选择一系列元素？

Question

如您所见，.row 元素是 .cell 元素的父元素。

我在 .row 元素中有一个 selected 元素，我想定位:

An element that is a child of the parent element that follows the parent containing .selected

这只能在 CSS 中实现吗？

假设我想选择包含 .selected 的父级旁边的父级的第二个 .cell

如何将包含数字 13 的 div 的背景颜色变为绿色？

.row .cell.selected {
  background-color: red
}
.row .cell.selected+.cell+.cell {
  background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
  background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
  background-color: red;
}
#month-view .row .cell.selected+.cell {
  background-color: yellow;
}
.row {
  padding: 50px;
}

<div id="month-view">
  <div class="row">
    <div class="cell">
      <div class="day"> <span>5</span></div>
    </div>
    <div class="cell selected">
      <div class="day"><span>6</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>7</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>8</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>9</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>10</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>11</span></div>
    </div>
  </div>
  <div class="row">
    <div class="cell ">
      <div class="day"><span>12</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>13</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>14</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>15</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>16</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>17</span></div>
    </div>
    <div class="cell">
      <div class="day"><span>18</span></div>
    </div>
  </div>
/div>

Answer 1

如果我理解您的问题，您希望第一行中获得“.selected”类的单元格在第二行中相同位置的单元格中获得样式。

仅用 CSS 是做不到的，只用 JS。 CSS 无法为您提供“.selected”单元格的索引位置。

如果您想要一个纯 HTML 和 CSS 的解决方案，我建议您在接下来的行和样式中添加第二个类，例如“.selected-column”。