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个孩子选择配方

回答

相关问题