Wie revolutioniert CSS-Nesting das CSS-Design und verbessert die Wartbarkeit des Codes?

Verschachtelung von CSS-Klassen: Eine Revolution im CSS-Design

In der Vergangenheit war CSS-Verschachtelung nicht möglich, aber mit der Einführung des CSS-Verschachtelungsmoduls ist es jetzt möglich Wirklichkeit. Dadurch können Sie Regeln in andere Regeln verschachteln und so eine besser wartbare und verwaltbare CSS-Codebasis erstellen.

Syntax der CSS-Verschachtelung

Die Syntax der CSS-Verschachtelung ist unkompliziert:

parent-class {
  & selector {
    declarations;
  }
}

In dieser Syntax stellt das &-Symbol den übergeordneten Selektor dar. Es ermöglicht Ihnen, untergeordnete Selektoren innerhalb der übergeordneten Klasse anzusprechen.

Beispiele für CSS-Verschachtelung

Hier sind einige Beispiele, wie Sie CSS-Verschachtelung verwenden können:

/* Apply styles to all `<td>` elements within `.colortable` */
table.colortable {
  & td {
    text-align:center;
  }
}

/* Apply styles to the first `</td><td>` element and its adjacent sibling within `.colortable` */
table.colortable {
  & td:first-child, & td:first-child + td {
    border:1px solid black;
  }
}

/* Apply styles to all `</td><th>` elements within `.colortable` */
table.colortable {
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

/* Apply styles to `.bar` elements that are children of `.foo` */
.foo {
  color: red;
  & > .bar {
    color: blue;
  }
}

/* Apply styles to `.parent` elements that contain `.foo` elements */
.foo {
  color: red;
  & .parent & {
    color: blue;
  }
}<h3 id="Browserunterstützung-für-CSS-Verschachtelung"> Browserunterstützung für CSS-Verschachtelung</h3>
<p>CSS-Verschachtelung wird in allen gängigen Browsern unterstützt. einschließlich:</p>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Edge</li>
<li>iOS Safari</li>
</ul>
<p> Mit CSS-Verschachtelung können Sie besser organisierten und wartbaren CSS-Code erstellen, der leichter zu lesen und zu lesen ist verstehe.</p>
</th>

Das obige ist der detaillierte Inhalt vonWie revolutioniert CSS-Nesting das CSS-Design und verbessert die Wartbarkeit des Codes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!