/**/

所以我试着在css中使用嵌套计数器,但我不太熟悉它的工作原理,这就是我到目前为止所知道的,

This is what I have so far

但我希望发生的是,每次有一个无序列表时,当我开始一个有序列表时,它会重置为1.2.3.

Something Like This

https://codepen.io/jojonmarijon/pen/OJZZPBK?editors=1100

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <ol>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <ol>
      <li>AAA</li>
      <li>BBB</li>
      <li>CCC</li>
      <ul>
        <li>AAAA</li>
        <li>BBBB</li>
        <ol>
          <li>AAAAA</li>
          <li>BBBBB</li>
          <li>CCCCC</li>
        </ol>
        <li>CCCC</li>
      </ul>
      <li>DDD</li>
    </ol>
  </ol>
</ul>

CSS

    ol {
        counter-reset: section;
        list-style-type: none;
    }

    ul {
        counter-reset: section;
    }

    ol > li {
        counter-increment: section;
    }

    ol > li::marker {
        content: counters(section, ".") ". ";
        left: -4px;
    }

    ul > li:before {
        counter-increment: section;
        content: '';
    }

推荐答案

我认为目前仅使用css是不可能实现通用解决方案的:如果层次 struct 中已经有一个具有<name>的计数器,则counter-reset: <name>将创建一个嵌套计数器.并且没有办法访问父计数器,或对父计数器进行"取消嵌套".你需要一个不同名字的计数器才能达到你的结果.

因此,我认为您需要在两个次优解决方案中进行 Select :

  1. 在JS中实施
  2. 最多只能支持n级深度,对于n级的较低级别.例如,类似这样的事情:
ol {
  counter-reset: section;
  list-style-type: none;
}

ol > li {
  counter-increment: section;
}

ol > li::marker {
  content: counters(section, ".") ". ";
  left: -4px;
}

/* Level 1 */

ul ol {
  counter-reset: nested;
}

ul ol > li {
  counter-increment: nested;
}

ul ol > li::marker {
  content: counters(nested, ".") ". ";
}

/* level 2 */

ul ul ol {
  counter-reset: nested2;
}

ul ul ol > li {
  counter-increment: nested2;
}

ul ul ol > li::marker {
  content: counters(nested2, ".") ". ";
}

/* etc. */

另请参阅:https://codepen.io/Tiddo/pen/vYjjRRx?editors=1100

我认为,在实践中,您可能最多只需要支持3-5个级别,因此您可能能够摆脱硬编码的解决方案.

Css相关问答推荐

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

flex 容器中的两个滚动块

如果父项的不透明度小于 1,则背景过滤器不适用

Angular 导航栏问题

CSS Stepper - LI After Overlaying LI Before

将 CSS 注入 Shadow 根.然而风格正在受到影响

你可以在 CSS 中扩展实体(entity)吗?

在 vuetify 中跨 `default.vue` 和 `index.vue` 维护网格系统

如何制作一个div来包装两个浮动div?

css显示:表格不显示边框

使用 Twitter Bootstrap 使页脚粘在页面底部

如何在不使用浮动的情况下垂直对齐 div?

悬停时如何在图像上显示文字?

CSS3可以转换字体大小吗?

将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)

使用 CSS 覆盖 element.style

Sass/Compass - 将 Hex、RGB 或命名 colored颜色 转换为 RGBA

禁用/关闭继承的 CSS3 过渡

CSS三角形自定义边框 colored颜色

设置行距