html - ul of images 只显示第一个 child

Question

我无法让我的 ul 显示不止一张图片。我试过尝试不同的东西，比如使用类和 id 而不是 ul:nth-child()。我这辈子都想不通我做了什么让它表现得像这样。问题出在我的 CSS 还是我的 html 中？

.container {
  width: 100%;
  height: 200px;
  background: #505050;
  position: fixed;
  margin: 0;
  padding: 0;
  bottom: 0px;
  left: 0;
}
.container ul {
  position: relative;
  margin: 0;
  padding: 0;
}
.container li {
  width: 300px;
  height: 200px;
  position: absolute;
  list-style: none;
}
.container ul:nth-child(1) {
  animation: cycleOne 10s linear infinite;
}
.container ul:nth-child(2) {
  animation: cycleTwo 10s linear infinite;
}
.container ul:nth-child(3) {
  animation: cycleThree 10s linear infinite;
}
.container ul:nth-child(4) {
  animation: cycleFour 10s linear infinite;
}
.container ul:nth-child(5) {
  animation: cycleFive 10s linear infinite;
}
.container ul:nth-child(6) {
  animation: cycleSix 10s linear infinite;
}
.container ul:nth-child(7) {
  animation: cycleSeven 10s linear infinite;
}
@keyframes cycleOne {
  0% {
    left: 500px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleTwo {
  0% {
    left: 1800px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleThree {
  0% {
    left: 1500px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleFour {
  0% {
    left: 1200px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleFive {
  0% {
    left: 900px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleSix {
  0% {
    left: 600px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleSeven {
  0% {
    left: 300px;
  }
  100% {
    left: -300px;
  }
}

<div class="container">
  <ul>
    <li>
      <a href="1.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="2.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="3.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="4.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="5.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="6.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="7.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
  </ul>
</div>

Answer 1

看来您使用 :nth-child() 定位了错误的元素

将每个 .container ul:nth-child(x) 更改为 .container ul li:nth-child(x)