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中文网其他相关文章！