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

Question

我有一个项目,我对标记没有任何控制权.我正在寻找一种方法来选择紧跟在'class1'实例之后的'class2'的每个实例.以下策略有效,但在某些情况下,连续存在超过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

这是使用 @spudley 建议的新选择器在黑暗中进行的尝试:not。看起来它有很好的支持： 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回其原始状态。这可能有点疯狂，具体取决于您应用的样式数量。