CSS のネストは可能になりましたか?-CSSチュートリアル-php.cn

CSS のネストは可能になりましたか?

Mary-Kate Olsen

リリース： 2024-12-15 20:26:11

オリジナル

849 人が閲覧しました

Is CSS Nesting Now Possible?

CSS ネスト: 理論から実践へ

CSS では、ネストの概念が長い間議論されてきました。古いバージョンの仕様ではネストがサポートされていませんでしたが、CSS ネストモジュールの導入により状況が変わりました。

CSS クラスは次のようにネストできますか:

.class1{some stuff}

.class2{class1;some more stuff}

ログイン後にコピー

答え:

はい、CSS のネストが可能になりました。 CSS ネスティングモジュールのおかげで。構文は次のとおりです。

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

ログイン後にコピー

この構文では、ネストされたセレクターが親セレクターからプロパティを継承できるため、より簡潔で保守しやすい CSS コードが可能になります。これは、複雑なレイアウトの整理やスタイル設定に特に役立ちます。

以上がCSS のネストは可能になりましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。