nth-child高级逻辑选择

Question

我事先道歉，我在这件事上没有取得很好的进展，所以我没有小提琴和Codepen。

我确实有以下布局（下面）我希望实现。

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

最后一张图片只是为了更容易理解我希望实现的目标而以水平顺序显示它们：）

最后要注意的是，如果您想知道

，我将使用Packery来实现自鸣得意

谢谢！

Answer 1

我知道的唯一方法就是使用两次相同的类来“欺骗”css：

div:nth-child(4n){background-color:red;}
div:nth-child(4n+1){background-color:red;}

JSFiddle here

希望这会有所帮助：）

Answer 2

根据MDN Docs：

  

Users CSS伪类匹配文档树中具有:nth-child(an+b)兄弟节点的元素，对于an+b-1的给定正值或零值，并且具有父元素。更简单地说，选择器匹配许多子元素，子元素系列中的数字位置与模式n匹配。

因此，要匹配蓝色方块（每个四元组的第一个和第四个），您可以使用以下内容：

an+b

和橙色矩形（每个四胞胎的第二个和第三个）：

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

还要确保在:nth-child(4n+2), :nth-child(4n+3) { ... } 之前添加选择器，以使其更具体。例如，使用:nth-child（参见下面的示例）或类/ id选择器之类的内容来获得最准确的结果。

工作示例：

＆＃13;

＆＃13;

div:nth-child(...)

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

另请参阅W3Schools.com和CSSTricks了解详情。