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元素相同的属性，因为它具有类＃＆＃34; red。＆＃34;

另一种说法：选择一个带有类的元素，＆＃34;红色，＆＃34;以及相同类型的下一个元素，无论是什么类。

我很难把头包裹起来。比任何事情更好的方法是选择相同类型的下一个兄弟而不是任何后续元素。例如，如果 span.red~span 并不意味着＆＃34; span元素与任何前一个跨越兄弟级别为红色的元素。＆＃34; 

感谢您的帮助。

以下是更多示例：

<div> </div>

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

选择最后一个span元素是因为第三个span有一个类，＆＃34; red。＆＃34;

<div> </div>

这样做的主要原因是我在可编辑的div中有元素。它们用css计数器编号。有些元素可能像图形一样被组合在一起，即2a和2b，而其他元素则不是，所以我最终可以得到元素1,2a，2b，2c，3等。我使用的类名告诉我它＆＃ 39; sa＆＃34; sub＆＃34;元素和增加子计数器但不增加主元素计数器。在一堆子元素告诉我它是最后一个子元素之后没有为下一个元素的类，我应该重置子计数器。我设置这种方式的原因是因为我希望能够移动元素并自动更新编号。此外，通过切换类名，可以很容易地改变某些东西是否为子元素。

Answer 1

我想要另外一两个案例进行测试，但这似乎适用于你的例子：

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

<强> jsFiddle example

Answer 2

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

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

}

Answer 3

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

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

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

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

3 个答案: