8

我有一个项目，其中我无法控制标记。我正在寻找一种方法来选择紧跟在“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>
4

4 回答 4

4

: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为原始状态。这可能有点疯狂，具体取决于您应用了多少样式。

于 2013-01-18T21:38:17.893 回答
3

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

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

您可以在此处找到有关它的更多信息。

这里也是一个例子http://jsbin.com/arorij/1/edit

编辑

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

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

.class1 + .class2 {
  color: red;
}
于 2013-01-18T21:39:37.503 回答
3

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

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

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

这样，您可以切换到更容易~选择所有相关class2元素的组，但使用not并~过滤掉<p>标签后面的元素。

例如：

.class1 ~ :not(p) ~ .class2

不幸的是，我认为这个想法不会如图所示。此处的使用~会导致我们不希望选择的某些组合，而不管not. 可能会想出一个not可以工作的选择器，但是我在我现在尝试的时间里还没有设法设计它。

于 2013-01-18T22:39:15.117 回答
0

也许您需要翻转逻辑？您可以为 .class1 之后的 .class2 或 .class2 之后的 .class2 编写规则吗？

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

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

于 2013-01-18T21:57:23.023 回答