html - 创建一个以静态字母十进制数字开头的列表

Question

我使用 Dreamweaver CC。我想创建一个列表，如下所示:

Q1. nnn
Q2. aaa
Q3. bbb

A1. ddd
A2. dde
A3. ccc

我使用这个CSS:

ol {
    counter-reset: item;
    list-style-type: decimal;
}
ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

ol {
  counter-reset: item;
  list-style-type: decimal;
}
ol li:before {
  content: 'Q' counter(item, decimal) '. ';
  counter-increment: item;
}

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

我得到:

1Q1.
2Q2.

Answer 1

因为您正在创建并使用 css 生成的内容来实现您自己的计数器，所以使用 ::before 伪元素和 css 计数器，因此您需要删除 native 计数器；否则，您自己的计数器(如您所见)将附加到(或简单地跟随)该 native 计数器。所以:

ol {
  counter-reset: item;
  list-style-type: none;
}
ol li:before {
  content: 'Q' counter(item, decimal) '. ';
  counter-increment: item;
}

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>