css - 需要显示一些 div 一个接一个地加载，使用转换或过渡从上到下

Question

需要显示一些 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

“...同一组 sibling 的标签”

演示

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>