需要显示一些div依次加载，使用转换或过渡从顶部到底部的d​​iv

Question

需要显示一些div依次，从上到下使用div或不使用位置（相对或绝对）加载的div。在我的情况下，div从下到上依次显示，但是我不能在不使用位置的情况下将其更改为从上到下反转。

body {
  background-color: #ddd;
  padding: 1em;
}
[class^="c"] {
  animation: slide 0.5s linear both;
  margin-bottom: 1em;
  opacity: 0;
  transform: translateY(-5vh);
}
[class^="c"]:nth-last-of-type(10) {
  animation-delay: 10s;
}
[class^="c"]:nth-last-of-type(9) {
  animation-delay: 9s;
}
[class^="c"]:nth-last-of-type(8) {
  animation-delay: 8s;
}
[class^="c"]:nth-last-of-type(7) {
  animation-delay: 7s;
}
[class^="c"]:nth-last-of-type(6) {
  animation-delay: 6s;
}
[class^="c"]:nth-last-of-type(5) {
  animation-delay: 5s;
}
[class^="c"]:nth-last-of-type(4) {
  animation-delay: 4s;
}
[class^="c"]:nth-last-of-type(3) {
  animation-delay: 3s;
}
[class^="c"]:nth-last-of-type(2) {
  animation-delay: 2s;
}
[class^="c"]:nth-last-of-type(1) {
  animation-delay: 1s;
}
@keyframes slide {
  0% {
    filter: blur(1em);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    position: relative;
    transform: translateY(0);
  }
}

<div class="cardWrap">
  <div class="card">itin 1</div>
  <div class="card">itin 2</div>
  <div class="card">itin 3</div>
  <div class="card">itin 4</div>
  <div class="card">itin 5</div>
  <div class="card">itin 6</div>
  <div class="card">itin 7</div>
  <div class="card">itin 8</div>
  <div class="card">itin 9</div>
  <div class="card">itin 10</div>
</div>

Answer 1

多个复杂和无效的CSS选择器

语法非常错误：

[class^="c"]:nth-last-of-type(2) {
  animation-delay: 2s;
}

应该是：

.card:nth-of-type(2) {
  animation-delay: 2s;
}

它完美地工作。

• 因此，对于类，只需在其前面加上一个点即可：。 className

---

• 尽管存在:last-of-type伪类，但:nth-last-of-type(2)背后的逻辑完全使我无所适从。

• nth ...代表多个未知值，可以是1、2、3，... 8,004.006等。序数 给我们这暗示我们正在处理项目的编号顺序。

/* This is the first tag of an identical group of siblings */

:first-of-type /*OR*/ :nth-of-type(1)

---

/* The number indicated within the parenthesis indicate the position a tag is in amongst
 it's identical siblings.*/

:nth-of-type(2)  // This would be the second tag of a group of identical sibling tags.

---

/* While :first-of-type has its uses, the `:last-of-type` even moreso. Don't think of it
  as a number, think of it as the only sibling that has no sibling after it and has 
 all of the siblings preceding it.*/

:last-of-type

“ ...同一个兄弟姐妹组的标签”

演示

body {
  background-color: #ddd;
  padding: 1em;
}

.card {
  animation: slide 0.5s linear both;
  margin-bottom: 1em;
  opacity: 0;
  transform: translateY(-5vh);
}

.card:nth-of-type(10) {
  animation-delay: 10s;
}

.card:nth-of-type(9) {
  animation-delay: 9s;
}

.card:nth-of-type(8) {
  animation-delay: 8s;
}

.card:nth-of-type(7) {
  animation-delay: 7s;
}

.card:nth-of-type(6) {
  animation-delay: 6s;
}

.card:nth-of-type(5) {
  animation-delay: 5s;
}

.card:nth-of-type(4) {
  animation-delay: 4s;
}

.card:nth-of-type(3) {
  animation-delay: 3s;
}

.card:nth-of-type(2) {
  animation-delay: 2s;
}

.card:nth-of-type(1) {
  animation-delay: 1s;
}

@keyframes slide {
  0% {
    filter: blur(1em);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    position: relative;
    transform: translateY(0);
  }
}

<div class="cardWrap">
  <div class="card">itin 1</div>
  <div class="card">itin 2</div>
  <div class="card">itin 3</div>
  <div class="card">itin 4</div>
  <div class="card">itin 5</div>
  <div class="card">itin 6</div>
  <div class="card">itin 7</div>
  <div class="card">itin 8</div>
  <div class="card">itin 9</div>
  <div class="card">itin 10</div>
</div>