CSS 相关；针对特定的 li class

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 classes 之外，还有其他方法可以仅改变第一个 current class 的不透明度。

Answer 1

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

i think you need this try this

Answer 2

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

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

查看工作示例：https://jsfiddle.net/yudi/a3w1bshr/

In css we need to count position with overall elements and here its a second element of <ul>

Answer 3

您可以在要更改的 li 中添加额外的 class。

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 4

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

<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 5

给你，先生

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

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

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

CSS 相关；针对特定的 li class

CSS related; targetting a special li class

html

css

slider