响应式设计中的第 n 个子“碰撞”/创建流体网格

Question

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

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

我正在使我的网站具有响应性，并且我在其中指定了一个断点

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

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

Answer 1

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

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

没有办法使用 CSS 选择一行中的第一项，因为它不知道一行中的第一项是什么。如果您知道要使用的确切边距并且您没有太多的断点需要处理，那么这是一个不错的选择。

Answer 2

试试：

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 对您的问题的评论是一种非常好的替代方法。

Answer 3

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

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

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

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