CSS ネスティングはどのように CSS 設計に革命を起こし、コードの保守性を向上させますか?

CSS クラスのネスト: CSS デザインの革命

以前は、CSS ネストは不可能でしたが、CSS ネスト モジュールの導入により、現在では CSS ネストが可能になりました。現実。これにより、ルールを他のルール内にネストでき、より保守しやすく管理しやすい CSS コードベースを作成できます。

CSS ネストの構文

CSS ネストの構文は簡単です:

parent-class {
  & selector {
    declarations;
  }
}

この構文では、& 記号は親セレクターを表します。これにより、親クラス内の子セレクターをターゲットにすることができます。

CSS ネストの例

CSS ネストの使用方法の例をいくつか示します。

/* 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="CSS-ネストのブラウザ-サポート"> CSS ネストのブラウザ サポート</h3>
<p>CSS ネストはすべての主要なブラウザでサポートされています。以下を含む:</p>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Edge</li>
<li>iOS Safari</li>
</ul>
<p> CSS ネストを使用すると、読みやすく、より整理され、保守しやすい CSS コードを作成できます。わかりました。</p>
</th>

以上がCSS ネスティングはどのように CSS 設計に革命を起こし、コードの保守性を向上させますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。