设计ul标签。编号列表

Question

我现在有这份名单

  <ul>
  <li>question1</li>
  <li>answer1</li>
  <li>question2</li>
  <li>answer2</li>
  </ul>

CSS：

  ul {
  list-style:decimal;
  }

难道每2分钟就会有另一个符号吗？尝试了第n个孩子，但是它的ul标签上的列表样式没有工作。

清单的例子，以弥补我的错误解释：

   1. question1
   a. answer1
   2. question2
   a. answer2
   3. question3
   and so on

Answer 1

演示Fiddle

如果您希望在不使DOM复杂化的情况下对项目样式的性质有更多的控制，您可以使用“也使用”(稍微复杂一点)：

body {
    counter-reset: listCounter;
}
ul {
    list-style:none;
}
ul> li:nth-child(odd):before {
    content:counter(listCounter)': ';
}
ul> li:nth-child(even):before {
    content:'A: ';
}
li {
    margin:20px 0;
}
li:nth-child(odd) {
    counter-increment: listCounter;
}

还请参见这个问题

Answer 2

您可以稍微修改HTML标记，以使事情更具语义性。像这样的事情应该有效：

HTML

<ul>
    <li>question1
        <ul>
            <li>answer1</li>
        </ul>
    </li>
    <li>question2
        <ul>
            <li>answer2</li>
        </ul>
    </li>
    ...
</ul>

CSS

ul {
    list-style-type: decimal;
}

ul ul {
    list-style-type: lower-alpha;
}

小提琴：http://jsfiddle.net/8Lbu7/

Answer 3

我觉得这不应该列在名单上。在语义上，这应该是一个定义列表。

<dl>
    <dt>Coffee</dt>
        <dd>Black hot drink</dd>
    <dt>Milk</dt>
        <dd>White cold drink</dd>
</dl>

希望能帮上忙。如果你想要a，b，1，2，你可以使用第n个子和:前面的伪类和内容。或者用HTML硬编码。

顺便说一下。如果要使用列表实现此效果，请尝试gyss答案。但我认为在这种情况下，你应该在另一个内嵌套列表。尤其是如果每个问题都有更多的答案。诚挚的问候!