具有树级别的Bootstrap折叠树视图（使用CSS）

Question

大家好，我在这里使用Bootstrap Collapse树视图。

我正在尝试使用CSS计数器添加崩溃级别，但是不幸的是，每次崩溃之前，我在计数器上都有一些小问题。

这是我要实现的目标

这就是我得到的

下面是有关我目前正在工作的示例代码。

我要去哪里错了？我只是不知道为什么CSS计数器混乱了。任何帮助将不胜感激。

$uncShare = '\10.0.0.1\share'
$path = '\\APP401\I\Run\Folder\Client\20171031\25490175\Data\brtbvsch'

# Works fine.
"${uncShare}${path}"

# Ditto
Join-Path $uncShare $path

.accordion.parent {
  counter-reset: level;
}

.accordion.parent .card:first-of-type {
  counter-increment: level;
}

.accordion.parent .card .card-header h5 button:before {
  content: counter(level);
}

Answer 1

以下树型需要将CustomerSerializer和counter-reset分配给特定级别的所有counter-increment的祖先元素。

counter()

     

^{注意：：1_______1 = #acc1 { counter-reset: A 0; counter-increment: A; } | 2 = #acc2 { counter-reset: B 1; counter-increment: B; } 3__|__3 = #acc3 { counter-reset: C 2; counter-increment: C; } | 4 = #acc4 { counter-reset: D 3; counter-increment: D; } 的默认值为counter-reset，显式分配是可选的。在示例中已分配它以显示增量模式。}

每个级别上0的规则集使用CSS Counters，因为没有它，最后一个规则集将覆盖先前的规则集，因为每个级别嵌套在另一个级别中。以下模式将隔离每个级别：

counter()

---

child combinator: >

HTML布局和某些BS类丢失或分配顺序错误。文档中的Bootstrap示例使用了大量的#accN > .card > .card-header > h5 > button:before { content: counter(...); } ，这使嵌套元素深入几个层次非常困难。以下演示使用<div>和<section>来打破单调。此外，演示中还实现了BS类的正确放置（请参见Bootstrap和card组件的部分）。

---

演示

<article>

body {
  overflow-y: scroll
}

#acc1 {
  counter-reset: A;
  counter-increment: A;
}

#acc1>.card>.card-header>h5>button:before {
  content: counter(A);
}

#acc2 {
  counter-reset: B 1;
  counter-increment: B;
}

#acc2>.card>.card-header>h5>button:before {
  content: counter(B);
}

#acc3 {
  counter-reset: C 2;
  counter-increment: C;
}

#acc3>.card>.card-header>h5>button:before {
  content: counter(C);
}

#acc4 {
  counter-reset: D 3;
  counter-increment: D;
}

#acc4>.card>.card-header>h5>button:before {
  content: counter(D);
}