Question

我试图使用css计数器为具有一些html类名的列表创建嵌套计数器列表项。我从mozilla的样本开始。在将.nested-list添加到选择器ol.nested-list>li:before之前，一切正常。

这是我的CSS和HTML。

ol {
  counter-reset: section;
}
ol>li:before {
  counter-increment: section;
}
ol.nested-list {
  list-style-type: none;
}
ol.nested-list>li:before {
  content: counters(section, ".") " ";
}

<ol>
 <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol>
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

Also on fiddle

Answer 1

增加每个列表项的计数器，而不是::before伪元素。

::before和::after元素在没有content的情况下不会退出。由于大多数列表项的content元素没有::before，因此该元素不存在，并且嵌套的section计数器未正确递增。

ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

ol.nested-list {
  list-style-type: none;
}

ol.nested-list>li:before {
  content: counters(section, ".") " ";
}

<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

Answer 2

我真的不知道你想要实现什么，为什么你需要一个.nested-list课程。无论如何，我把她的两个解决办法解决了你的问题。

第一：没有任何课程 这将为所有列表添加顺序编号

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

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

注意：在您的代码中，您有ol>li，但没有必要添加直接育儿，因为<li>只能存在于<ol>内部，所以我减少了您的代码。

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

第二名：.nested-list Workarround 您可以“隐藏”::before内容的所有ol.nested-list内容，并在>的第一个级别“取消隐藏”，如果您删除了直接.nested-li内容，则可以在所有孩子身上使用此类列表列表ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; visibility: hidden; } .nested-list > li::before{ visibility: visible; }

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
  visibility: hidden;
}
.nested-list > li::before{
  visibility: visible;
}

示例：

<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

::before

注意：要使用::after和::，最好添加两个克隆@Nullable @Override public Uri insert(@NonNull Uri uri, @Nullable ContentValues values) { switch (MATCHER.match(uri)) { case CODE_CHEESE_DIR: final Context context = getContext(); if (context == null) { return null; } final long id = SampleDatabase.getInstance(context).cheese() .insert(Cheese.fromContentValues(values)); context.getContentResolver().notifyChange(uri, null); return ContentUris.withAppendedId(uri, id); case CODE_CHEESE_ITEM: throw new IllegalArgumentException("Invalid URI, cannot insert with ID: " + uri); default: throw new IllegalArgumentException("Unknown URI: " + uri); } }

当选择器包含类名时，CSS计数器为零

2 个答案: