Question

我目前有此列表

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

CSS：

  ul {
  list-style:decimal;
  }

反正有没有让每一个第二个符号？尝试过nth-child，但由于list-style位于ul标签上，因此无效。

列表示例，以弥补我的不良解释：

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

Answer 1

您可以稍微更改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 2

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

另见this question

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 answer。但我认为在这种情况下，你应该将列表嵌套在另一个内。特别是如果每个问题都有更多的答案。最好的问候！

Answer 4

要应用已确定的CSS来配对 li 项目，请尝试以下方法：

li {
    list-style:decimal;
}
li:nth-child(odd) {
    list-style:circle;
}
li:nth-child(even) {
    list-style:decimal;
}

希望它有所帮助！

Answer 5

ul li:nth-child(odd){
 list-style-type: square; 
}

样式ul标签。编号列表

5 个答案:

Demo Fiddle