多個最後一個孩子沒有按預期工作。爲什麼？

Question

我有以下HTML：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
</ul> 

並應用於它下面的CSS：

body { 
    padding: 0; 
    margin: 0; 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    height: 100vh; 
    background: #eee; 
} 

ul { 
    max-width: 400px; 
    min-width: 400px; 
} 

ul > li { 
    overflow: hidden; 
    float: left; 
    width: 30%; 
    height: 50px; 
    margin: 1%; 
    background: orange; 
    color: #fff; 
    display: flex; 
    align-items:center; 
    justify-content:center; 
} 

ul > li:nth-child(3n + 1):nth-last-child(3) { 
    background: #727272; 
} 

你可以看到同樣的小提琴HERE。

現在以下選擇：

ul > li:nth-child(3n + 1):nth-last-child(3) { 
     background: #727272; 
    } 

似乎是在最後一排選擇的第一要素，我不是很瞭解如何？

而且

ul > li:nth-child(3n + 1):last-child { 
     background: #727272; 
    } 

開不工作。爲什麼？

我INFACT希望以下選擇器選擇最後一排的第一個元素：

ul > li:nth-child(3n + 1):nth-last-child(1) { 
     background: #727272; 
    } 

那麼究竟我是曲解這裏是什麼，爲什麼多nth-child選擇不工作，我期望它的方式嗎？

如何我想實現： 最後一排選擇的第一要素..我相信我已經來達到的是，只是不知道它是如何工作的。

Answer 1

這..

ul > li:nth-child(3n + 1):nth-last-child(1) { 
     background: #727272; 
    } 

不起作用，因爲它不符合都條件。

這不是:nth-last-child(1) AND :nth-child(3n+1)所以它沒有被選中。

這工作

ul > li:nth-child(3n + 1):nth-last-child(3) { 
     background: #727272; 
    } 

becuasie它既是li:nth-child(3n + 1)和:nth-last-child(3)。

但是，它選擇最後一行中的第一個元素的事實是純粹是巧合。

CSS無法檢測佈局。它不知道這是連續的。 CSS選擇元素而沒有別的。