如何在具有不同父元素的特定（.selected）元素后面选择一系列元素？

Question

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

我在.row元素中有一个选中的元素，我想定位：

  

一个元素，它是父元素的子元素，它跟在包含.selected

的父元素之后

这只能在CSS中使用吗？

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

如何更改包含数字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

如果我理解了你的问题，那么你想要一个获得＆＃34;。选择＆＃34;第一行中的类在第二行中相同位置的单元格中获取样式。

仅使用CSS只能使用JS，这是不可能的。 CSS无法为您提供＆＃34; .selected＆＃34;的索引位置。细胞

如果你想要一个纯HTML和CSS的解决方案，我建议你添加第二个类，如＆＃34; .selected-column＆＃34;到此后的下一行和样式。

Answer 2

在CSS中不可能，因为你可以在CSS中向后/向后移动DOM。但是如果你可以使用JS或jQuery，这就是一种方法。使用$.parent()，$.next()和:nth-child jQuery非常简单直观。

＆＃13;

＆＃13;

$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');

＆＃13;

.row .cell.selected {
  background-color: red
}

.row {
  padding: 50px;
}

.green {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;