html - 如何在 HTML 列表中使用字母“Q”和“A”

Question

是否可以在 HTML 或 CSS 中设置列​​表以使用特定字母而不是项目符号？

例子：

Q. a question will be posted here.
A. the answer will go here.

我知道我可以进入并格式化每个条目，但我更愿意<li>用一个类修改单个标签。

Answer 1

从语义上讲，a<dl>更适合 Q/A。您可以:before像这样使用伪元素：

dt:before {
  content: 'Q. ';
}
dd:before {
  content: 'A. ';
}

<dl>
  <dt>Is this a question?</dt>
  <dd>Yes, it is.</dd>
</dl>

注意：根据（强调我的）的文档：<dl>

名称-值组可以是术语和定义、元数据主题和值、问题和答案，或任何其他名称-值数据组。

Answer 2

是的，您可以:before像这样使用伪选择器：

li.question:before {
    content: "Q. ";
}
li.answer:before {
    content: "A. ";
}

现在您只需应用类question和answer那些<li>元素。

Answer 3

您可以使用:nth-child和的组合:before。

li {
    list-style:none;
}   
li:nth-child(odd):before {
    content:"Q. "; 
}
li:nth-child(even):before {
    content:"A. "; 
}

示例：http: //jsfiddle.net/Xt72Y/

它适用于两者ol，ul并且不需要更改 html。

Answer 4

是的，您可以将关键字母包含在列表项内容中：

<ul>
<li>Q. a question will be posted here.
<li>A. the answer will go here.
</ul>

并list-style-type: none在 CSS 中使用。或者，更合理的是，省略ul标记并仅对p项目使用标记。该ul元素应该在对事物有所帮助时使用，而不是您必须将其用于远程看起来像列表的所有事物。

也可以通过 CSS 生成的内容使浏览器显示 Q 和 A，而不将它们包含在适当的内容中，但由于它们是内容的一部分，当 CSS 被禁用或覆盖时，这会导致不必要的问题。

Answer 5

这与@Appleshell 答案非常相似，但不会因为不需要使用而丢失缩进或文本换行格式list-style:none;

JSFiddle

li:nth-child(odd) {
    list-style-type: "Q. ";
    margin-bottom: 5px;
}

li:nth-child(even) {
    list-style-type: "A. ";
    margin-bottom: 15px;
}

---

<p><strong>FAQ</strong>:</p>

<ul>
  <li>Why is this important?</li>
  <li>Lorem ipsum dolor sit amet, ad pri soleat verear habemus, porro feugiat quaerendum nam ut, id nibh soleat salutandi usu. Vim novum iracundia ad, nec ei erat explicari. Cu quo dissentiet complectitur necessitatibus. Ut ignota aliquam sit. Mea eu amet debet oratio, cum quando munere appareat ut. In semper ancillae sea, ius ad equidem evertitur. Eam summo quaestio ne, eu sea quando aliquid accusam.</li>
  <li>What should I do next?</li>
  <li>Lorem ipsum dolor sit amet, ad pri soleat verear habemus, porro feugiat quaerendum nam ut, id nibh soleat salutandi usu. Vim novum iracundia ad, nec ei erat explicari. Cu quo dissentiet complectitur necessitatibus. Ut ignota aliquam sit. Mea eu amet debet oratio, cum quando munere appareat ut. In semper ancillae sea, ius ad equidem evertitur. Eam summo quaestio ne, eu sea quando aliquid accusam.</li>
</ul>

---

结果：

---

第二个使用类名的JSFiddle示例。