CSS 嵌套現在可能了嗎？-css教學-PHP中文網

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中文網其他相關文章！