是一個偽類，你可能會在tr/td或是抽去欄位時會用到，但你可曾有想過拿他來做css動畫呢?
:nth-child可以拿來抽取欄位的編號，那便也可以拿來給物件上代號，從而讓他們有順序的進場，搭配calc(css中的加減乘除運算)，來進行時間的調節。
使用的情況，當物件超過兩個以上的css動畫，兩個以內的都可以用after/before來充當，但當超過的時候就會需要使用這個，通常會套用在span容器。
下面我做了個動畫，背景顏色飛入填充，看你要不要先觀察，下面在做解釋
程式碼
<style>
.come {
position: relative;
z-index: 1;
overflow: hidden;
}
.come span {
position: absolute;
background-color: gray;
transition: 1.5s;
z-index: -1;
transition-delay: calc((var(--n) - 1) * 0.15s);
}
.come .odd,
.come .even {
height: 20%;
width: 100%;
top: calc((var(--n) - 1) * 20%);
}
.come .left,
.come .right {
height: 100%;
width: 11%;
background-color: violet;
}
.come:hover span {
transform: translateX(0);
}
.come .odd {
transform: translateX(150%);
}
.come .even {
transform: translateX(-150%);
}
.come .left {
transform: translateY(150%);
left: calc((var(--n) - 6) * 10%);
}
.come .right {
transform: translateY(-150%);
left: calc(var(--n) * 10%);
}
.come span:nth-child(1) {
--n: 1;
}
.come span:nth-child(2) {
--n: 2;
}
.come span:nth-child(3) {
--n: 3;
}
.come span:nth-child(4) {
--n: 4;
}
.come span:nth-child(5) {
--n: 5;
}
.come span:nth-child(6) {
--n: 6;
}
.come span:nth-child(7) {
--n: 7;
}
.come span:nth-child(8) {
--n: 8;
}
.come span:nth-child(9) {
--n: 9;
}
</style>
<body class="d-flex justify-content-center">
<div style="margin-top: 100px">
<div class="come d-flex justify-content-center align-items-center" style="height: 300px; width: 500px; border: 2px solid blue">
進來
<span class="odd"></span>
<span class="even"></span>
<span class="odd"></span>
<span class="even"></span>
<span class="odd"></span>
<span class="left"></span>
<span class="left"></span>
<span class="right"></span>
<span class="right"></span>
</div>
</div>
</body>
nth-child(1)這段是在給裡面的span上代號由上而下1~9，裡面的--n是可以更改的把他當作變數即可，程式裡的
clac(var(--n))，當中的var(--n)便是帶入的變數值，把這個當一般變數就好不要想太多不然會很複雜，至於
span:nth-child(1)這裡則是有順序的分別由上而下編號為1~9這樣
transform: translateX(0);讓他們都回歸到位子上
transition-delay: calc((var(--n) - 1) * 0.15s);這便是調節時差進入，如果你想要更細的調節就是取class分別歸類這樣
top: calc((var(--n) - 1) * 20%);這便是calc運算來控制位子
剩下的
position: relative;為了讓span取的父元素，然後可以使用z-index
z-index: 1;上下層
overflow: hidden;這樣可以讓藏在藍框外的span隱身且不觸發hover。
補一下:nth-child(x)取的是該標籤在父元素內的由上而下的順位，例如
<div>
<h1></h1>
<span></span>
<span></span>
</div>
你要讀到下方的span，:nth-child就要從2開始
大致就這樣，仔細說好像也沒什麼好講的，就當作是一個示範使用啦，謝謝觀看~~
iThome鐵人賽
看影片追技術
看更多