html - nth-child高级逻辑选择

Question

我提前道歉，我在这件事上没有取得很好的进展，所以我没有 Fiddle 或 Codepen。

我确实有以下我希望实现的布局(如下)。

我唯一的问题是如何选择一行中的两个元素，然后再选择一行中的另外两个元素，这样我就可以相应地设置它们的样式。请记住，第一个 child 需要单独选择。

最后一张图只是为了让它们以水平顺序显示，以便更容易理解我想要实现的目标:)

最后要注意的是，如果你想知道，我将使用 Packery 来启用自鸣得意的合身

谢谢!

Answer 1

根据 MDN Docs :

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

因此，要匹配蓝色方 block (每个四联体的第一个和第四个)，您可以使用以下内容:

:nth-child(4n+1), :nth-child(4n)

对于橙色矩形(每个四联体的第二个和第三个):

:nth-child(4n+2), :nth-child(4n+3) { ... }

还要确保在 :nth-child 之前添加一个选择器以使其更具体。例如，使用类似 div:nth-child(...)(参见下面的示例)或类/id 选择器以获得最准确的结果。

---

工作示例:

div {
  width: 100px;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}
div:nth-child(4n+1), div:nth-child(4n) {
  height: 150px;
  background-color: blue;
}
div:nth-child(4n+2), div:nth-child(4n+3) {
  height: 100px;
  background-color: orange;
}

<span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</span>

---

另见 W3Schools.com和 CSSTricks了解更多信息。