Question

我有一个项目，其中我对标记没有任何控制权。我正在寻找一种方法来选择'class2'的每个实例，立即跟随'class1'的实例。以下策略有效，但在某些情况下，连续存在超过20个“class2”实例，我宁愿避免代码中出现这么大的混乱。

.class1 + .class2,
.class1 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2 + .class2,
.class1 + .class2 + .class2 + .class2 + .class2 + .class2
// etc.
{
  // Applied Styles
}

...设置以下

的样式

<div class="class1"></div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<div class="class2">Style Me!</div>
<p>Blah blah blah</p>
<div class="class2">DO NOT STYLE ME</div>
<div class="class2">DO NOT STYLE ME EITHER</div>

Answer 1

使用新的:not选择器@spudley建议，这是一个黑暗的刺。看起来好像支持：http://caniuse.com/#search=%3Anot。我希望语法是正确的。编辑欢迎。

其中大部分来自@ mookamafoob的解决方案。我没有提交编辑，以防@mookamafoob过早地使用:not选择器。

http://jsbin.com/umivas/6/edit

.class1 ~ .class2 + .class2 {
  color: red;
}

.class1 + .class2 {
  color: red;
}

.class1 ~ *:not(.class2) ~ .class2 {
  color: inherit;
}

编辑：抱歉没有解释。最后一部分尝试选择任何.class1兄弟没有.class2的元素，并将所有后续兄弟.class2重置回其原始状态。根据您申请的样式数量，这可能会有些疯狂。

Answer 2

一般兄弟组合器可能会得到你需要的东西。它看起来像这样：

.class1 ~ .class2 {
/* Styles */
}

您可以在其上找到更多信息here。

以下是http://jsbin.com/arorij/1/edit

的示例

修改

This可能适用于您的情况，使用两个规则，如下所示：

.class1 ~ .class2 + .class2 { color: red; } .class1 + .class2 { color: red; }

Answer 3

我的建议是简单地设置.class1 ~ .class2的样式，然后将其覆盖回p ~ .class2的上一个值。

这不是一个完美的解决方案，因为那里的第二个选择器无法知道它的覆盖范围是什么;你只需要将它设置为你期望的默认值。但它应该是可行的。

我的另一个想法是使用CSS not选择器。

有了这个，您可以切换到更简单的~来选择所有相关class2元素的组，但使用not和~来过滤掉它遵循<p>标记。

例如：

.class1 ~ :not(p) ~ .class2

不幸的是，我认为这个想法不会如图所示;这里使用~会产生一些我们不希望选择的组合，无论not如何。有可能提出一个可以工作的not选择器，但我还没有设法在我现在尝试的时候设计它。

Answer 4

也许你需要翻转逻辑？你能为.class2或.class2之后的.class2写一个规则吗？

.class1 + .class2, .class2 + .class2 {
    ...
}

该规则不适用于您示例中的最后一个div，因为它不遵循。

CSS选择一系列即时兄弟姐妹

4 个答案: