5

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

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

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

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

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

4

3 回答 3

12

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

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

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

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}
于 2013-03-11T19:31:31.130 回答
3

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

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

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

于 2013-03-11T17:51:45.380 回答
0

尝试：

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

选择器按照:not它在锡上所说的做，并且不选择与括号内的选择器匹配的元素。

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

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

于 2013-03-11T18:01:11.180 回答