CSS選擇下一個和以前的元素

Question

如何個別指定列表元素，比如我想提出：

HTML：

<ul class="roundabout-holder"> 
    <li class="roundabout-moveable-item"></li> 
    <li class="roundabout-moveable-item"></li> 
    <li class="roundabout-moveable-item roundabout-in-focus"></li> 
    <li class="roundabout-moveable-item"></li> 
    <li class="roundabout-moveable-item"></li> 
    <li class="roundabout-moveable-item"></li> 
</ul> 

的CSS：

.roundabout-in-focus{ 
font-size:1em; 
} 

.roundabout-in-focus.prev(), 
.roundabout-in-focus.next(){ 
font-size:.9em; 
} 


.roundabout-in-focus.prev().prev(), 
.roundabout-in-focus.next().next(){ 
font-size:.8em; 
} 

.roundabout-in-focus.prev().prev().prev(), 
.roundabout-in-focus.next().next().next(){ 
font-size:.7em; 
} 

那意味着離焦點越遠，列表元素的字體大小就越小。

Answer 1

每一個下一個兄弟可以用+ .roundabout-moveable-item代表，然而there is no equivalent for previous siblings。

當你需要的款式下一個和以前的元素相對的元素被指定爲.roundabout-in-focus，你將不能夠做到這一點使用其他技術，如:not(.roundabout-in-focus)。因此你不能用純CSS來做到這一點。

如果您使用jQuery，我假設您基於示例中的.prev()和.next()表示法，這應該相對容易完成。