Pouvez-vous maintenant imbriquer des classes CSS ?

Imbrication de classes CSS : désormais rendue possible

Dans les versions CSS précédentes, l'idée d'imbrication de classes était insaisissable. Les développeurs ont dû recourir à des techniques plus complexes pour obtenir des effets similaires. Cependant, le module CSS Nesting a ouvert de nouvelles possibilités.

Pouvez-vous imbriquer des classes CSS ?

La réponse est un « oui » catégorique. Avec le module CSS Nesting, vous pouvez adopter la syntaxe suivante :

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

Cette syntaxe vous permet d'imbriquer des classes, créant ainsi des structures hiérarchiques.

Exemples d'implémentation

Voici quelques exemples illustrant la puissance du CSS imbrication :

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

Avec l'imbrication CSS, vous pouvez désormais écrire des feuilles de style plus concises et maintenables. Profitez de la flexibilité accrue et de la structure sémantique qu'il offre.

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!