在响应式设计/创建流体网格中的n-child“碰撞”

Question

我的网站有一个网格系统，最初设置了一个应用于网格中每六个项目的样式

li:nth-child(5n+1){ margin-left:0 }

我正在使我的网站响应，我有一个断点，我指定

li:nth-child(3n+1){ margin-left:0 }

但问题是它仍在解释之前的5n + 1风格，这是我不想要的。如何告诉CSS忽略该样式。或者更好的是，我如何创建流体网格，以便每当li项目连续第一个时，它的边距为0，而其他所有边缘的边距为25px？

Answer 1

通过在父元素上使用负边距，您可以在不需要媒体查询的情况下做出响应：

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}

Answer 2

  

重置5n + 1上的边距的问题是我不确定5n + 1是否取代3n + 1或反之亦然 - 因为在第15个元素处，这些样式规则将发生碰撞。

它们同样具体，因为您一次只处理每个规则一个:nth-child()选择器，因此您需要在断点中将3n + 1规则放在3n + 1规则之前，并且将边距重置为其非零值在5n + 1规则范围内。这样，3n + 1规则将优先于匹配两个规则的元素。

无法使用CSS选择连续的第一项，因为它不清楚行中的第一项是什么。如果你知道确切的使用余量，并且你没有太多的断点来处理，这是一个很好的选择。

Answer 3

尝试：

li:nth-child(5n+1):not(:nth-child(3n+1)){ margin-left:0 }

:not选择器执行它在锡上所说的内容，并且不会选择与括号内的选择器匹配的元素。

此外，如果两个规则发生冲突且两者都没有优先级，则将使用CSS中最后出现的规则。 将li:nth-child(5n+1)放在样式表中后li:nth-child(3n+1)可能更简单。

编辑：@ cimmanon对你的问题的评论是一个非常好的替代方法。