1

我正在使用响应式设计，并且在我的 css 中有例如三个不同的媒体查询与列表项样式：

@media only screen and (min-width : 1350px) {
    li.item:nth-child(n+6) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: red;
    }
}

@media only screen and (min-width : 1550px) {
    li.item:nth-child(n+7) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: green;
    }
}

@media only screen and (min-width : 1750px) {
    li.item:nth-child(n+8) {
        border-top: 1px solid #d9ddd3;
    }
    h1 {
        color: blue;
    }
}

所以从第 6/7/8 li 项目开始，我添加了一个顶部边框。问题是：

  • 对于 1350 像素，我得到了 n+6
  • 对于 1550 像素，我得到了 n+6
  • 对于 1750 像素，我得到了 n+6

当我添加另一个较早的 nth-child 属性时，会为该 li 项目的每个即将到来的 nth-child 设置这个较早的属性。

我添加了用于测试更多其他样式，例如绿色、蓝色和红色标题，这些样式正在运行。

有什么问题？

最好的问候塞巴斯蒂安

=> 解决方案

好的，现在重置 previos nth-child 属性，如下所示：

li.item:nth-child(n+7) {
    border-top: 0;
}
li.item:nth-child(n+8) {
    border-top: 1px solid #d9ddd3;
}
4

1 回答 1

4

您只检查最小值，而不是最大值，因此会发生重叠。（你的问题有点不清楚，不是问题吗？）如果我对媒体查询的理解是正确的，那么你没有应该级联并替换现有规则的规则，正如我假设你的意图。

请尝试以下条件：

@media only screen and (min-width : 1350px) and (max-width : 1549px)
@media only screen and (min-width : 1550px) and (max-width : 1749px)
@media only screen and (min-width : 1750px)
于 2012-09-02T13:12:43.463 回答