Pouvez-vous nist @media et @Support Queries?

Oui, vous pouvez nist CSS @media et @supports Queries, et l'ordre de nidification n'affecte pas les fonctionnalités. Aucun préprocesseur CSS n'est nécessaire; CSS standard gère cela.

Cet exemple démontre une utilisation imbriquée valide:

 @Supports (- a: b) {
  @Media (min-large: 1px) {
    corps {
      Contexte: rouge;
    }
  }
}

L'inversion de l'ordre de nidification fonctionne également:

 @Media (min-large: 1px) {
  @Supports (- a: b) {
    corps {
      Contexte: vert;
    }
  }
}

Une nidification supplémentaire est possible, bien que la logique puisse devenir complexe:

 @Media (min-large: 2px) {
  @Media (min-large: 1px) {
    @Supports (--a: b) {
      @Supports (affichage: flex) {
        corps {
          Contexte: rose;
        }
      }
    }
  }
}

Bien que des structures profondément imbriquées soient possibles, une nidification excessive peut réduire la lisibilité. Cependant, les analyseurs CSS standard gèrent cela sans problème; Les préprocesseurs CSS (SASS, moins, le stylet testés) ne modifient pas la structure imbriquée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!