CSS 组样式定义

Question

我正在学习 CSS，所以这可能是一个非常基本/愚蠢的问题，但我无法在任何地方找到它，抱歉。我有以下 CSS 代码:

#table-of-contents ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

#table-of-contents ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

#table-of-contents ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}
#table-of-contents li ol > li {
  margin: 0;
}

#table-of-contents li ol > li:before {
  content: counters(item, ".") " ";
}

我想知道是否有任何方法可以只写一次#table-of-contents，比如

#table-of-contents {
    ol {
      list-style-type: none;
      counter-reset: item;
      margin: 0;
      padding: 0;
    }

    ol > li {
      display: table;
      counter-increment: item;
      margin-bottom: 0.6em;
    }

    ol > li:before {
      content: counters(item, ".") ". ";
      display: table-cell;
      padding-right: 0.6em;    
    }
    li ol > li {
      margin: 0;
    }

    li ol > li:before {
      content: counters(item, ".") " ";
    }
}

可以做这样的事情吗？

Answer 1

它的名字是 CSS Nesting正在开发中，尚未正式发布。但它可以在 Sass、Less、Stylus 等 CSS 预处理语言中使用。您可以考虑使用它们。