css - 伪类（第 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) 代替