从排序列表中排除无序列表项计数

Question

我正在尝试在我的有序列表中设置无序列表旁边的数字。

出于某种原因，项目A1，项目A2和＆amp;项目B1似乎将自己包括在柜台中。

需要做什么才能使列表A和B的标题只有那个计数器？

.ordered {
  list-style-type: none;
  margin: 0;
  margin-left: 3em;
  padding: 0;
  counter-reset: li-counter;
}
.ordered li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 0.5em;
  min-height: 3em;
  color: #fff;
  font-size: 1.5em;
  line-height: 1.5;
  border-left: 2px solid #fff;
}
.ordered li::before {
  position: absolute;
  top: 0;
  left: -01em;
  width: 0.8em;
  font-size: 2.5em;
  line-height: 1;
  font-weight: bold;
  text-align: right;
  color: #fff;
  content: counter(li-counter);
  counter-increment: li-counter;
}
/*unordered list*/
.unordered ul {
  list-style-type: disc;
}
.unordered li {
  font-size: 1.5em;
  line-height: 1.5;
  margin-left: 15px;
  margin-right: 10px;
  margin-bottom: 30px;
  color: #fff;
}
* { background-color: black; }

<ol class="ordered">
  <li>List A
    <br>
    <ul class="unordered">
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>List B
    <br>
    <ul class="unordered">
      <li>Item B1</li>
    </ul>
  </li>
</ol>

Answer 1

而不是：

.ordered li::before { ... }

这样做：

.ordered > li::before { ... }

在您的代码中，您使用后代组合器（选择器之间的空格）定位所有li元素。根据其名称，它针对所有后代。

相反，请使用仅针对儿童的儿童组合子（>）。