伪类（第n个孩子或第一个孩子）不起作用

Question

我正在尝试通过为每个子对象使用nth-child来增加不透明度，但这是行不通的。你能帮我吗？

HTML

<ul class="slider">
              <li class="fadein">
                <div class="parent-container"><a href="/img/slider-model1.jpg"><img src="/img/test.jpg" alt=""></a></div>
              </li>
              <li class="fadein">
                <div class="parent-container"><a href="/img/slider-model2.jpg"><img src="/img/test.jpg" alt=""></a></div>
              </li>
              <li class="fadein">
                <div class="parent-container"><a href="/img/slider-model3.jpg"><img src="/img/test.jpg" alt=""></a></div>
              </li>
</ul>

CSS（SASS）

.slider{
   .fadein{
      &:nth-child(1){
      opacity : 0;
      }
      &:nth-child(2){
      opacity : 0.5;
      }
      &:nth-child(3){
      opacity : 0.7;
      }
   }

Answer 1

如果发布屏幕截图或更多详细信息（例如浏览器类型和版本），将很有帮助。您发布的代码对我有用：（请参见此代码笔）https://codepen.io/DavidSabine/pen/BaBYYoe

.slider {
  .fadein {
    &:nth-child(1) {
      opacity: 0;
    }
    &:nth-child(2) {
      opacity: 0.5;
    }
    &:nth-child(3) {
      opacity: 0.7;
    }
  }
}

Answer 2

这里简短回答，因为我在打电话。

如果nth-child（1）不起作用，请尝试使用nth-of-type（1）