Können Sie jetzt CSS-Klassen verschachteln?

Verschachtelung von CSS-Klassen: Jetzt möglich

In früheren CSS-Versionen war die Idee, Klassen zu verschachteln, schwer zu fassen. Um ähnliche Effekte zu erzielen, mussten Entwickler auf komplexere Techniken zurückgreifen. Das CSS-Nesting-Modul hat jedoch neue Möglichkeiten eröffnet.

Können Sie CSS-Klassen verschachteln?

Die Antwort ist ein klares „Ja“. Mit dem CSS-Nesting-Modul können Sie die folgende Syntax übernehmen:

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

Mit dieser Syntax können Sie Klassen verschachteln und hierarchische Strukturen erstellen.

Beispielimplementierungen

Hier sind einige Beispiele, die die Leistungsfähigkeit von CSS veranschaulichen Verschachtelung:

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;
  }
}

Mit CSS-Verschachtelung können Sie jetzt prägnantere und wartbarere Stylesheets schreiben. Genießen Sie die erhöhte Flexibilität und semantische Struktur, die es bietet.

Das obige ist der detaillierte Inhalt vonKönnen Sie jetzt CSS-Klassen verschachteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!