不同媒体查询中的不同 nth-child 属性

Question

我正在使用响应式设计，在我的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 项目开始，我添加了顶部边框。问题是：

• 对于 1350px 我得到 n+6
• 对于 1550px 我得到 n+6
• 对于 1750px 我得到 n+6

当我添加另一个较早的第 n 个子属性时，这个较早的属性是为该 li 项目的每个即将到来的第 n 个子属性设置的。

我添加了一些其他样式来测试，例如绿色、蓝色和红色标题，这些样式都有效。

有什么问题？

致以诚挚的问候塞巴斯蒂安

=> 解决方案

好的，现在通过重置以前的 nth-child 属性就可以了，如下所示：

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

Answer 1

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

请尝试以下条件：

@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)