CSS，HTML中基本LoopingSelector的想法

Question

我是一名没有设计技能的程序员。我知道Basic CSS3，但我在JavaScript中更好。

我的问题是我需要做一个基本的LoopingSelector。

基本思路是屏幕中间有一个选定值，上下值增加和减少。可能我可以在JavaScript中做到这一点，但我认为会有性能问题和响应性问题。所以我想用CSS做。我知道选择器有问题。我不知道怎么样。如果有人可以帮助我，我需要一个关于它的指南。

感谢。

编辑：

CSS

    .vote {
        list-style: none;
    }

        .vote li {
            display: none;
            padding: 10px;
            border: 1px solid black;
        }

        .vote .selected {
            display: inline;
        }

        /*It must show 2 items after the selected class */
        .vote li.selected:nth-child(n + 2) {
            display: inline;
        }

        /*It must show 2 items before the selected class */
        .vote li.selected:nth-child(-n + 2) {
            display: inline;
        }

HTML

<ul class="vote">

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="selected">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>

</ul>

Answer 1

你不能在这里使用nth-child，因为n不是当前元素。它是一个从0到N的计数器。所以当你写nth-child(3n)时，每三个孩子都会得到应用的样式。

但是对于您的问题，您可以使用selector1 + selector2为selector1之后的兄弟元素设置样式。但是你无法在

之前访问元素

li.selected + li + li{
    /* 2 li later */
}