0

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

例如，给定以下 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 同级且具有红色类的 span 元素”，则可以。

谢谢你的帮助。

以下是更多示例：

<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 等。我使用的类名只是告诉我它是“子”元素并增加子计数器但不增加主元素计数器。在一堆子元素告诉我它是最后一个子元素之后没有下一个元素的类，我应该重置子计数器。我以这种方式设置它的原因是因为我希望能够在元素周围移动并自动更新编号。此外，只需切换类名即可轻松更改某物是否为子元素。

4

3 回答 3

1

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

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

jsFiddle 示例

于 2013-02-09T21:59:08.297 回答
0

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

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

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

于 2013-02-09T22:08:54.800 回答
0

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

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

}
于 2013-02-09T21:57:13.323 回答