Question

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

我已经尝试过.articlecontainer ol ol {counter-increment：none}认为它会跳过对嵌套OL的计数，但是由于我现在超出我的原因，它将第三个LI计为OL的一部分他甚至都不是（我想。）的孩子。

＆＃13;

li

＆＃13;

.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;
}

＆＃13;

Answer 1

您可以使用 child combinator (>) 来确保您的选择器仅定位所需元素的直接子元素。在您的情况下，您正在寻找应用两个儿童组合器;一个用于确保ol元素是.articlecontainer的直接子元素，另一个用于确保li元素是ol元素的直接子元素：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

至于您对标记重组的评论，请注意<ol>元素 only allows <li>元素作为直接子元素。如果您想要子菜单，必须驻留在父<li>元素内（如ol > li > ol > li）才能形成有效的标记。

希望这有帮助！：）

Answer 2

您可以在自定义计数器时使用<input id="checkboxID" name="checkboxName" value="checkboxValue" type="checkbox">直接子选择器。

.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;
}

CSS计数器：Skip OL嵌套在另一个OL中

2 个答案: