Bolehkah anda bersarang @media dan @support pertanyaan?

Ya, anda boleh bersarang CSS @media dan @supports pertanyaan, dan perintah bersarang tidak mempengaruhi fungsi. Tiada preprocessor CSS diperlukan; CSS standard mengendalikan ini.

Contoh ini menunjukkan penggunaan bersarang yang sah:

 @Supports (-a: b) {
  @media (min-lebar: 1px) {
    badan {
      Latar Belakang: Merah;
    }
  }
}

Membalikkan perintah bersarang juga berfungsi:

 @media (min-lebar: 1px) {
  @Supports (-a: b) {
    badan {
      Latar Belakang: Hijau;
    }
  }
}

Sarang lebih lanjut mungkin, walaupun logik mungkin menjadi kompleks:

 @media (min-lebar: 2px) {
  @media (min-lebar: 1px) {
    @Supports (--A: b) {
      @Supports (paparan: flex) {
        badan {
          Latar Belakang: Pink;
        }
      }
    }
  }
}

Walaupun struktur yang sangat bersarang mungkin, bersarang yang berlebihan dapat mengurangkan kebolehbacaan. Walau bagaimanapun, parser CSS standard mengendalikan ini tanpa masalah; Preprocessors CSS (SASS, kurang, stylus diuji) tidak mengubah struktur bersarang.

Atas ialah kandungan terperinci Bolehkah anda bersarang @media dan @support pertanyaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!