Ist CSS-Verschachtelung jetzt möglich?

CSS-Verschachtelung: Von der Theorie zur Praxis

In CSS ist das Konzept der Verschachtelung seit langem ein Diskussionsthema. Während ältere Versionen der Spezifikation die Verschachtelung nicht unterstützten, hat die Einführung des CSS-Nesting-Moduls das Spiel verändert.

Können CSS-Klassen wie folgt verschachtelt werden:

.class1{some stuff}

.class2{class1;some more stuff}

Antwort:

Ja, CSS-Verschachtelung ist jetzt dank des CSS-Nesting-Moduls möglich. Die Syntax lautet wie folgt:

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

Diese Syntax ermöglicht einen präziseren und wartbareren CSS-Code, da verschachtelte Selektoren Eigenschaften von ihren übergeordneten Selektoren erben können. Dies ist besonders nützlich für die Organisation und Gestaltung komplexer Layouts.

Das obige ist der detaillierte Inhalt vonIst CSS-Verschachtelung jetzt möglich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!