使用：nth-​​child伪类，是否可以选择由2个元素组分隔的3个元素组？

Question

我正在构建一个砌体网格，并且无法找出代数来选择合适的元素。

• 2x宽款式的元素： 1,7,11,17,21,27，......
• 2x高风格的元素： 2,6,12,16,22,26，......

所有其他元素将由默认样式处理。

标记是：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

我无法找到用于:first-child伪类的模式。我附上了我想要实现的目标。

任何数学都可以为[可能非常简单的]挑战做好准备吗？

Answer 1

您可以按如下方式对序列进行分类：

• 1,7,11,17,21,27，...包含2个子序列：

  • 1,11,21，...
  • 7,17,27，...

因此我们可以使用2个选择器：:nth-child(10n + 1)和:nth-child(10n + 7)。

• 2,6,12,16,22,26，...包含2个子序列：

  • 2,12,22，...
  • 6,16,26，......

因此我们可以使用2个选择器：:nth-child(10n + 2)和:nth-child(10n + 6)。

根据您的图片，我可以看到所有1, 11, 21, ...和7, 17, 27, ...的宽度应为 约 66.66%（ 2/3）和较大的height与其他单元格的默认高度进行比较。2, 12, 22, ...和6, 16, 26, ...的高度应与1, 11, 21, ...和{{1}的高度相同并且它们与其他默认单元格（约7, 17, 27, ...或33.33%）具有相同的宽度。

所以我们可以这样设置1/3样式：

ul

Demo.

在上面的演示中，您可以看到ul { width:500px; list-style:none; border:20px solid gray; overflow:auto; padding:0; } ul > li { display:inline-block; float:left; width:33.33%; height:50px; border:2px solid lightgray; box-sizing:border-box; text-align:center; } /* this is just to center the text vertically */ ul > li:before { content:''; display:inline-block; height:100%; vertical-align:middle; } ul > li:nth-child(10n + 1), ul > li:nth-child(10n + 7) { width:66.66%; height:80px; } ul > li:nth-child(10n + 2), ul > li:nth-child(10n + 6){ height:80px; } 的内边框围绕所有内部项目并且与2px的边框相邻，要删除它，您需要定位适当的单元格和删除适当的边框。这是 Updated Demo ，这更复杂。