Question

在以下情况下需要一些帮助。我有一个滑块谁的设置是这样的（简化）：

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>


.slider li {opacity: 0.3;}
.slider li.center.active {opacity: 1;}
.slider li.current:first-child {opacity: 1;}  // this here doesn't work.

我无法使用.slider li:nth-child(2).current {opacity: 1;} 因为我使用滑块，所以li标签的数量不同。

除了更改li类之外，还有其他方法可以仅更改第一个current类的不透明度。

Answer 1

您可以使用下面提到的代码：

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>
.slider li {opacity: 0.3;}
.slider li.center.active {opacity: 1;}
.slider li.current {opacity: 1;}
.slider li.center.active ~ li.current  {opacity: 0.3;}

Answer 2

https://jsfiddle.net/1jko09xq/1/

i think you need this try this

Answer 3

在你的情况下，第一个当前<li>实际上是<ul>使用此css的第二个元素

.slider li.current:nth-child(2) {opacity: 1;}

参见工作示例：https://jsfiddle.net/yudi/a3w1bshr/

在css中我们需要用整体元素计算位置，这里是<ul>的第二个元素

Answer 4

您可以为要更改的li添加其他课程。

HTML：

  <div class="slider">
        <ul>
            <li>...</li>
            <li class="current sliderOpacity">...</li>
                <li class="center active">...</li>
                <li class="current">...</li>
                <li>...</li>
            </ul>
        </div>

CSS：

.sliderOpacity {
opacity: 1;}

Answer 5

在这里你先生

＆＃13;

.slider li,
.slider ul > .current ~ .current { opacity: 0.3; }

.slider li.center.active,
.slider ul > .current { opacity: 1; }

＆＃13;

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li class="current">...</li>
        <li>...</li>
    </ul>
</div>

＆＃13;

CSS相关;针对一个特殊的李班

5 个答案: