CSS BETWEEN 选择器？

Question

我了解“相邻选择器”+

我想做的是根据元素两侧 div 上的类更改元素的样式。例如:

<div class="positive">...</div>
<div class="divider"></div>
<div class="negative">...</div>

'positive' 和 'negative' 类有不同的背景，分配可能会根据用户交互等而改变。我希望 div.divider 根据其两侧的 div 类选择背景。我们有从正到负、负到正、正到正、负到负等“过渡”的分频器。还有更多状态，这些只是示例。

想法是，当 JS 更改 div.divider 两侧的 div 类时，我希望更改分隔线的样式(主要是背景)。

这可能吗？

Answer 1

CSS 没有，现在也没有(我不认为)有一个 BETWEEN 选择器。浏览器将网页作为流处理，而 between 选择器需要引用先前读取的元素，从而减慢渲染时间。 This页面有关于令人垂涎的 parent 选择器的解释，这在某种程度上也适用于 between 选择器。

仅将中间 div 用作样式元素在语义上是不合适的，以下可能是更好的选择。

我认为您最好的选择是使用 ADJACENT 选择器更改 positive 或 negative 的上半部分以响应其邻居。使用 CSS3:

.positive + .negative { border-top-image:url('NEGATIVE_BELOW_POSTIIVE'); }
.negative + .positive { border-top-image:url('POSITIVE_BELOW_NEGATIVE'); }

您还可以按照以下方式在 CSS3 中使用多个背景图片:

.positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE');
                        background-position:center-top;
                      }
.negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE');
                        background-position:center-top;
                      }

在 CSS2 和更早版本中，您可能需要预先构建所有背景图像并使用上述策略更改它们。

.positive, .negative { background-image:url('DEFAULT'); }
.positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE'); }
.negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE'); }