1

私はレスポンシブ デザインを使用しています。CSS には、たとえば、リスト アイテム スタイルの 3 つの異なるメディア クエリがあります。

@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を取得しました

別の以前の nth-child プロパティを追加すると、この以前のプロパティは、この li アイテムの今後の nth-child ごとに設定されます。

緑、青、赤の見出しなど、他のスタイルをテストするために追加しましたが、これらのスタイルは機能しています。

どうしたの？

よろしくセバスチャン

=>解決策

さて、次のように前の 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 に答える