下一个和上一个元素的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;
}

这意味着 .roundabout-in-focus 越远，列表元素的字体大小就越小。

Answer 1

每个下一个兄弟都可以用+ .roundabout-moveable-item 表示，但是there is no equivalent for previous siblings。

由于您需要为指定为.roundabout-in-focus 的元素设置相对 元素的样式，因此您将无法使用其他技术（例如:not(.roundabout-in-focus)）来执行此操作。因此，您不能使用纯 CSS 来做到这一点。

如果您使用的是 jQuery，我假设它基于您示例中的 .prev() 和 .next() 符号，这应该相对容易完成。