根据前一个相同类型的元素选择元素

Question

我正在尝试根据前一个相同类型元素的类来选择元素。

例如，给定以下 HTML，选择第三个 span 元素：

<div>
  <span class="red"></span>
  <span class="red"></span>
  <p>
    <span id="select me"></span>
  </p>
  <span id="don't select me"></span>
</div>

我希望该 span 元素具有与前一个 span 元素相同的属性，因为它具有类“red”。

另一种说法：选择一个具有“红色”类的元素以及相同类型的下一个元素，而与类无关。

我很难解决这个问题。总比没有好是一种选择相同类型的下一个兄弟而不是任何后续元素的方法。例如，如果 span.red ~ span 不表示 "span element with ANY previous span Sister with a class red."

，则它是可以的。

感谢您的帮助。

这里有更多例子：

<div>
  <span class="red"></span>
  <span id="select me"></span>
  <p>
    <span class="red"></span>
  </p>
  <span id="select me"></span>
</div>

在上面的示例中，选择了第二个 span 元素，因为第一个 span 有一个类“red”。

选择最后一个 span 元素是因为第三个 span 有一个类“red”。

<div>
  <span class="red"></span>
  <span class="red"></span>
  <p>
    <b></b>
  </p>
  <span id="select me"></span>
</div>

主要原因是我在可编辑的 div 中有元素。它们用 CSS 计数器编号。有些元素可能像图形一样组合在一起，即 2a 和 2b，而另一些则不是，所以我最终可能会得到元素 1、2a、2b、2c、3 等。我使用的类名只是告诉我它是“子”元素并增加子计数器但不增加主元素计数器。在一堆子元素告诉我它是最后一个子元素之后没有下一个元素的类，我应该重置子计数器。我以这种方式设置它的原因是因为我希望能够在元素周围移动并自动更新编号。此外，只需切换类名即可轻松更改某项是否为子元素。

Answer 1

没有办法在选择器中说“同类型的兄弟姐妹”。但是您可以在您选择的选择器之后使用兄弟选择器，并将它们组合成一个满足您需求的选择器，例如：

span.red + span, div.red + div
{

}

Answer 2

我想要另外一两个案例来测试它，但这似乎适用于您的示例：

span.red ~* span {
    background: red;
}

jsFiddle example

Answer 3

如果它只嵌套在级别上，你可以试试这个：

.red + * > span {
  color: red;
}

这有什么用例？为什么不将红色添加到您希望以相同方式设置样式的所有元素？