不同的媒體查詢中的第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)