CSS第n個孩子選擇配方

我的HTML項的列表，我需要選擇每3比3（1,2,3,7,8,9,13,14,15等）CSS第n個孩子選擇配方

請告訴我，是否可以使用CSS nth-child選擇器以及括號中的公式是什麼？或者唯一的辦法是JavaScript？

來源

2016-04-22 Roman

需要查看您的HTML。 – BoltClock

是否是同一類型的所有元素？您可能可以使用：nth-of-type（3）。：如果我沒有弄錯，那麼第n個孩子也會選擇孩子的孩子。

來源

2016-04-22 03:44:17 Popatop15

是的，所有元素都是相同的類型 - 它是無序列表的項目。該功能是項目動態生成，所以我不知道它們的確切數量。 – Roman

您可以使用：nth-type（奇數）和：nth-of-type（偶數）。 – Popatop15

你的場景（目的）是什麼？有許多方法來歸檔〜

這裏有一種方法使用替代技術：

li:nth-of-type(n+13) { 
    color: green; 
} 
li:nth-of-type(n+10) { 
    color: red; 
}  
li:nth-of-type(n+7) { 
    color: green; 
} 
li:nth-of-type(n+4) { 
    color: red; 
} 
li:nth-of-type(n+1) { 
    color: green; 
}

我這裏寫有SCSS一個簡單的演示：

https://jsbin.com/gihuki/1/edit?html,css,output

來源

2016-04-22 04:18:50 twxia

A具有自適應佈局和項目列表，其中每個項目都有照片和文本。在桌面版上每行可放3個項目。根據設計師的想法，偶數行的項目將照片浮動到左側，奇數行項目右側浮動以獲得圖像。當屏幕變窄時，每行將適合2個項目，並且只有一個移動版本的項目。所以我需要的解決方案不依賴於每行中的項目數量。 – Roman

只給每一行一個類名（奇數和偶數）。並使用@media查詢來解決此問題。 – twxia

這是我第一次想到）對於桌面版本，這將是最好的解決方案。但對於平板電腦和移動版本來說，它並不適用。在桌面版本三個項目在一行和一個容器中。但在平板電腦版中，只有兩個在第一行，第三個在第二行。 – Roman

萬歲！我找到了解決方案！謝謝你的回答！我的版本是：

.item:nth-child(1+6n), 
.item:nth-child(2+6n), 
.item:nth-child(3+6n) { 
    /* styles */ 
}

來源

2016-04-22 17:20:57 Roman

CSS第n個孩子選擇配方

回答

相關問題