下一个和上一个元素的CSS选择器 [英] CSS selector for next and previous elements

问题描述

如何单独定位列表元素，例如我想：

How do I target the list element individually, for example I would like to make:

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;
}

这意味着焦点距离越远，列表元素的字体大小。

That means the further away the .roundabout-in-focus, the smaller the list element's font size.

推荐答案

每个下一个兄弟都可以用 + .roundabout-moveable-项，但没有与以前的兄弟姐妹等同的东西。

Every next sibling can be represented with a + .roundabout-moveable-item, however there is no equivalent for previous siblings.

由于你需要将下一个和前一个元素的样式设置为相对到被指定为的元素。.roundabout-in-focus ，您将无法使用其他技术，如：not（.roundabout-in-focus）。因此，你不能使用纯CSS这样做。

As you need to style the next and previous elements relative to the element being designated as .roundabout-in-focus, you will not be able to do this using other techniques such as :not(.roundabout-in-focus). Therefore you can't do this using pure CSS.

如果你使用jQuery，我假设基于 .prev ）和 .next（）在你的例子中的符号，这应该比较容易完成。

If you're using jQuery, which I'm assuming based on the .prev() and .next() notations in your example, this should be relatively easy to accomplish.

这篇关于下一个和上一个元素的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！