<分区>
html - 尝试解析 CSS :nth-child formula with elements with a gallery
标签 html css css-selectors
我正在尝试获取具有重复模式的图库。图库由 2 列和未定义的行组成，我希望一张图片的宽度为 60%，另一张图片的宽度为 40%。
但是在第二行应该颠倒顺序并且永远不会像之前的行一样。
这样会结束一个重复的模式:
当我有很多图片并且我无法在 nth-child 的帮助下编写该模式时，问题就开始了。
这就是我的壁橱:
p:nth-child(2n-1) {
background: green;
color: white;
}
p:nth-child(2n-2) {
background: red;
color: white;
}
p:nth-child(3n+0) {
background: red;
color: white;
}
p:nth-child(3n+1) {
background: green;
color: white;
}<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>如何获取公式？哪一个是解决方案？
最佳答案
您可以使用 4n+x(其中 x 是 1 到 4 之间的值)作为 nth-child 值，如下所示
p:nth-child(4n+1),
p:nth-child(4n+4) {
background: green;
color: white;
}
p:nth-child(4n+2),
p:nth-child(4n+3) {
background: red;
color: white;
}<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The 10th paragraph.</p>
<p>The 11th paragraph.</p>
<p>The 12th paragraph.</p>
<p>The 13th paragraph.</p>关于html - 尝试解析 CSS :nth-child formula with elements with a gallery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50857032/