Question

制作编号渐进列表的（非编号）标题的正确方法是什么？

以下代码很简单（它允许我有一个渐进式列表，当插入新项目时，其数字会自动更新，但如果我有一个带编号的子列表，我每次添加项目时都必须更改起始编号到上一个子列表）但我担心它不正确，我收到错误：

强大的＆＃39;标签可能不是＆＃39; ol＆＃39;标签

＆＃13;

<ol>
   <strong>A</strong>
   <li>A1</li>
   <li>A2</li>
   <li>A3</li>
   <strong>B</strong>
   <li>B1</li>
   <li>B2</li>
   <li>B3</li>
</ol>

＆＃13;

换句话说，如果我将一个项目添加到子列表＆＃34; A＆＃34;，则必须相应更新后续列表的编号（A-1234 ... B-567）。

修改＆＃34; Melius re perpensa ＆＃34; （想得更好），就我的问题而言，最好的解决方案是......改变问题。而不是列表，更好的表，具有自动行编号（不包括标题），如下面的代码所示。

＆＃13;

table {
    counter-reset: rowNumber;
}

table tr:not(.header) {
    counter-increment: rowNumber;
}

table tr:not(.header) td:first-child::before {
    content: counter(rowNumber);
}

＆＃13;

<table>
     <tr class="header">
        <th>A</th>
    </tr>
    <tr>
        <td> A1</td>
    </tr>
    <tr>
        <td> A2</td>
    </tr>
    <tr>
        <td> A3</td>
    </tr>
    <tr class="header">
        <th> B</th>
    </tr>
    <tr>
        <td> B1</td>
    </tr>
    <tr>
        <td> B2</td>
    </tr>
    <tr>
        <td> B3</td>
    </tr>
</table>

＆＃13;

Answer 1

你可以这样做;免除<strong> s并创建自己的伪编号。

ol li[class] {
  margin-top: 1.2em;
  position: relative;
}

ol li[class]::before {
  content: attr(class);
  display: block;
  position: absolute;
  font-weight: 700;
  top: -1.2em;
}

<ol>
  <li class="A">A1</li>
  <li>A2</li>
  <li>A3</li>
  <li class="B">B1</li>
  <li>B2</li>
  <li>B3</li>
</ol>

Answer 2

使用嵌套列表，ul和or ol。你可以用css隐藏点：

＆＃13;

ul>li {
  list-style-type: none;
}

＆＃13;

<ul>
  <li><strong>A</strong>
    <ol>
      <li>A1</li>
      <li>A2</li>
      <li>A3</li>
    </ol>
  </li>
  <li>
    <strong>B</strong>
    <ol>
      <li>B1</li>
      <li>B2</li>
      <li>B3</li>
    </ol>
  </li>
</ul>

＆＃13;

制作编号渐进列表的（非编号）标题的正确方法是什么？

2 个答案: