我想選擇nth-child(2n)串列中匹配的所有元素，但第一個匹配元素除外；例如...
li:nth-child(2n) {
background: red;
}
li:nth-child(2) {
background: none;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>這樣做的結果是只有四、六、八和十具有紅色背景顏色。
我想知道是否有更好的方式來表達 CSS 規則，以及是否可以表達為單個規則：
li:nth-child(2n) {
background: red;
}
li:nth-child(2) {
background: none;
}
這些可以結合起來并且仍然以相同的方式運行嗎？
uj5u.com熱心網友回復：
您可以使用:not()偽類來排除第二個孩子。
li:nth-child(2n):not(:nth-child(2)) {
background: red;
}
更好的方法是使用An B語法 for:nth-child()選擇從第四個孩子開始的每個第二個孩子。
li:nth-child(2n 4) {
background: red;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>uj5u.com熱心網友回復：
當然，使用li:nth-child(2n 4). 第 n 個子選擇器的格式為An B，其中：
- A 是整數步長，
- B 是整數偏移量，
- n 是所有非負整數，從 0 開始。
li:nth-child(2n 4) {
background: red;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>在 format(2n 4)中，您實際上是從第四個元素（基于 1 的索引）開始，每次遞增 2。所以，4、6、8、...
uj5u.com熱心網友回復：
CSS :nth-child Selectors -> 您將在自述檔案下方找到答案。
注意：記得向下滾動到底部。
css-nth-child-selectors 代碼-> 還有一個整個檔案的視圖，由 header 分隔。
我希望它對你有用。
最適合這種情況的情況如下：
li:nth-child(2n 4) { background: red; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525145.html
標籤：htmlcss