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号李项目开始，我正在添加一个顶部边框。问题是：

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

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

我添加了更多其他样式的测试，例如绿色，蓝色和红色标题，这些样式正在发挥作用。

有什么问题？

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

=＆GT;溶液

好的，现在重置了这样的previos 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)

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

1 个答案: