不同的媒体查询中的第n个孩子属性

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/7th/8th锂项目开始，我添加一个顶部边框。问题是：

• 为1350px我得到N + 6
• 为1550px我得到N + 6
• 为1750px我得到N + 6

当我添加另一个较早nth-小孩财产，这个早先的一个是为这个李项目的每一个未来的孩子设定的。

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

有什么问题？

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

Answer 1

你只检查最小值：

与问候 塞巴斯蒂安

=>解决方案

好与正在重置previos第n个孩子这类似现在弄明白了，而不是最大值，因此会发生重叠。 （你的问题有点不清楚，那是没有问题？）如果我对媒体查询的理解是正确的，那么你就没有规则应该级联并取代现有的规则，正如我假设你打算的那样。

请尝试以下条件改为：

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