下一个和前一个元素的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。

由于您需要将下一个和前一个元素 relative 设置为指定为.roundabout-in-focus的元素的样式，您将无法使用{{1}等其他技术执行此操作}。因此，您无法使用纯CSS执行此操作。

如果你正在使用jQuery，我假设它基于你的例子中的:not(.roundabout-in-focus)和.prev()符号，这应该相对容易实现。