1

我是一个没有设计技能的程序员。我知道基本的 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>
4

1 回答 1

1

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

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

li.selected + li + li{
    /* 2 li later */
}
于 2015-01-31T11:22:51.727 回答