html常见问题排序表

Question

我正在创建一个有FAQ页面的网站，我想知道我是否可以列出一个“订购”列表，而不是显示

1. 问题..。 a)回答.
2. 问题 ( a)回答 等，将使用：

​

<ol>
  <li>question</li>
      <ol type="A">
        <li>answer</li>
      </ol>
  <li>question 2</li>
      <ol type="A">
        <li>answer 2</li>
        <ol>
</ol>

但是有没有办法把数字(和字母)变成问题和答案呢？还是我必须手动键入每一行的问题和答案？我以前使用过JavaScript (和css)，但从未使用Jquery。我更喜欢用JavaScript来做。

​

编辑:当我问这个问题时，我不知道dd和dt (描述列表)。起初，我试着把一行说出问题，然后再回答下一行，但答案“蒂莫西·琼斯说，比列一个有序的列表更有意义。”

Answer 1

我将使用描述表和CSS ::before选择器来完成此操作：

​

<style type="text/css">
   dt::before {
       content: "Question: ";
   } 
   dd::before {
       content: "Answer: ";
   }
</style>
<dl>
  <dt>How would this look?</dt>
      <dd>it would look alright</dd>
  <dt>Alright, well how would this look?</dt>
      <dd>it would also look alright</dd>
</dl>

​

(酌情添加样式)。比起javascript解决方案，我更喜欢这一点，因为它不需要在页面加载后进行任何处理。

Answer 2

HTML

<ol class="faq">
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
</ol>

CSS

ol { list-style-type: none; }

ol.faq  { padding-left: 0; }

ol.faq > li::before {
    content: "Question";
    color: red;
}

ol.faq > li > ol > li::before {
    content: "Answer";
    color: green;
}

演示：http://jsfiddle.net/wxocofu6/5/

注意，在您的代码中，您的列表嵌套不当。

Answer 3

一种方法是将图标样式设置为none，然后在CSS中使用，设置文本。

​

.questions li { list-style-type: none; font-weight: bold; color: black; } 
.questions li:before { content: "Question"; padding-right: 5px; color: red; }
.answer li { list-style-type: none; font-weight: bold; color: black; } 
.answer li:before { content: "Answer"; padding-right: 5px; color: red; }

<ol class="questions">
  <li>Do you do the thing?</li>
      <ol class="answer">
        <li>Yes, we do.</li>
      </ol>
  <li>How do you do the thing?</li>
      <ol class="answer">
        <li>With lots of magic!</li>
        <ol>
</ol>

​