Стиль между 2 классов

Question

У меня есть HTML-код, как

<table .. class="atree" .. /> 
<table><td>a</td></table> 
<table><td>b</td></table> 
<table><td>c</td></table> 
<table><td>d</td></table> 
<table... class="btree" .. /> 
<table><td>e</td></table> 
<table><td>f</td></table> 
<table><td>g</td></table> 

Теперь я хочу, чтобы применить стиль для всех с.в. между двумя классами «atree» унд «BTree», например, определенный цвет фона. Предположим, что ожидаемым результатом является красный фон для «a», «b», «c» и «d». Это возможно?

Answer 1

Вы можете попробовать работать с 'next siblings' selector ~, но это сохранит ваш стиль, даже после вашего класса «stop». Там также есть :not() pseudo class, но это делает только простые селектора, поэтому внутри нет ~. Единственное решение я вижу, чтобы противостоять стиль, путем перезаписи каждого свойства:

Простой пример:

HTML:

<ul> 
    <li>Lorem Ipsum</li> 
    <li class='start'>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
    <li class='stop'>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
<ul> 

CSS:

.start, .start ~ li { 
    color: green; 
} 
// note this has to come second, as the specificity is the same as the rule above 
li, .stop ~ li, .stop { 
    color: red; 
    // all your styles need to be countered/reset here 
} 

http://jsfiddle.net/p0et4yu0/

В javascript это было бы довольно легко. И в реальной жизни я бы просто добавил класс ко всем элементам, которые я хотел бы видеть по-разному (возможно, даже на скрипте на стороне сервера) вместо использования каких-то границ диапазона.