html - DL 堆叠，我是否遗漏了一些 CSS？

Question

我正在使用如下递归 DL 元素:

<dl>
  <dt>1</dt>
  <dl>
      <dt>1.1</dt>
      <dl>
         <dt>1.1.1</dt>
      </dl>
  </dl>
</dl>

在 Firefox 中，它呈现如下:

1
   1.1
       1.1.1

但在 Chrome 和 Internet Explorer 上我只能得到:

1

1.1

1.1.1

如何编写在 Firefox 上呈现类似的代码 和 Chrome/Internet Explorer。一些特殊的造型 深度学习与 CSS？我更喜欢 Firefox 渲染。

P.S.: 通常 dl 至少有一个 dd 或 dt。定义 是<!ELEMENT dl (dt|dd)+> .所以我想这是允许的 只有 dt 而没有 dd。但非正统的是 在 dl 中有一个 dl。

Answer 1

添加这个CSS:

dl:not(:first-child) {
    /* "dl dl" and "dl ~ dl" are also possible solutions.
       They will work on old browsers, too */
    margin-left: 20px;
}

此代码将在除第一个标签之外的所有 dl 标签上设置边距。

Demo working on both Chrome and Firefox