我如何分别定位列表元素,例如,我想进行以下操作:
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;
}
这意味着焦点对准处越远,列表元素的字体大小越小。
每个下一个同级都可以用a表示+ .roundabout-moveable-item
,但是先前的同级没有等效项。
由于您需要相对于指定为的元素设置下一个和上一个元素的样式.roundabout-in-focus
,因此您将无法使用其他技术(例如)来完成此操作:not(.roundabout-in-focus)
。因此,您不能使用纯CSS做到这一点。
如果您使用的是jQuery(我根据示例中的.prev()
和.next()
表示假设),则这应该相对容易实现。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句