CSS МЕЖДУ селектором?

Question

Я понимаю «соседний селектор» +

То, что я хотел бы сделать, это изменить стилизацию элемента, основываясь на классах в div по обе стороны от него. Например:

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

«Позитивные» и «негативные» классы имеют разный фон, и назначения могут меняться в зависимости от взаимодействия с пользователем и т. Д. Я бы хотел, чтобы div.divider выбирал фон на основе классов div по обе стороны от него. У нас есть делители, которые «переходят» от положительного к отрицательному, от отрицательного к положительному, от положительного к положительному, от отрицательного к отрицательному и т. Д. Есть больше состояний, это всего лишь примеры.

Идея заключается в том, что JS меняет класс div по обе стороны от div.divider. Я бы хотел, чтобы стиль делителя (в основном, фон) изменился.

это возможно?

Answer 1

CSS не имеет и не является (я не думаю), чтобы иметь выбор между селектором BETWEEN. Браузеры обрабатывают веб-страницы как потоки, а селектор между ними требует обращения к ранее прочитанному элементу, что замедляет время рендеринга. Эта страница содержит пояснения относительно желаемого селектора 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'); }