html - CSS 计数器 : Skip OL nested inside of another OL

Question

我遇到了一个问题，我正在使用的所见即所得编辑器通过在父 ol 内部而不是内部创建新的 ol 来在列表中创建子项父 li 的，这让我很难理解如何让计数器将元素 3 识别为 3 而不是 4。我意识到正确的方法是嵌套 ol 到 li 中，但这个编辑器不想这样做，而且我有一些不懂 HTML 的人使用编辑器制作列表。

我试过 .articlecontainer ol ol { counter-increment: none } 认为它会跳过对嵌套 OL 的计数，但是由于我现在无法理解的原因，它将第三个 LI 计为 OL 的一部分，它是甚至不是(我想)的 child

.articlecontainer ol li {
  line-height: 24px;
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .5em 0;
  background: #f7f7f7;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.articlecontainer ol li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 25px;
  /* was 50% */
  margin-top: -1.3em;
  height: 2em;
  background: #F7941E;
  width: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
  line-height: 24px;
  -moz-background-clip: padding;
  color: white;
}

.articlecontainer ol {
  counter-reset: li;
}

.articlecontainer ol li:hover {
  background: #f7941e;
}

<div class="articlecontainer">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
      <li>Sub-item 3</li>
    </ol>
    <li>Item 3</li>
  </ol>
</div>

Answer 1

你可以做的是利用 child combinator ( > ) 以确保您的选择器仅针对所需元素的直接子元素。在您的情况下，您希望应用两个子组合器；一个确保ol元素是 .articlecontainer 的直接子元素, 另一个确保 li元素是那些 ol 的直接子元素元素:

.articlecontainer > ol > li {
    line-height: 24px;
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    background: #f7f7f7;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}

.articlecontainer > ol > li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 25px; /* was 50% */
    margin-top: -1.3em;
    height: 2em;
    background: #F7941E;
    width: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    line-height: 24px;
    -moz-background-clip: padding;
    color: white;
}

.articlecontainer > ol {
    counter-reset: li;
}

.articlecontainer > ol > li:hover {
    background: #f7941e;
}

<div class="articlecontainer">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
      <li>Sub-item 3</li>
    </ol>
    <li>Item 3</li>
  </ol>
</div>

至于您对标记重组的评论，请注意 <ol>元素 only allows <li>元素作为直接子元素。如果您想拥有子菜单，它们必须位于父级<li> 内元素(如 ol > li > ol > li )以形成有效标记。

希望对您有所帮助! :)