css - 如何获得符合列表样式样式规则的 HTML 定义列表？

Question

所以我正在标记客户的网页设计。该页面是一个常见问题解答页面，其中每个常见问题解答部分都有一个问题和答案列表。这种情况下最合适的语义标记是 html 定义列表。

客户的模型还在每个问题/答案对旁边显示数字，例如有序列表。

所以我很自然地认为我会用 <dl> 标记内容元素，并使用 CSS 添加 list-style-type: decimal .然而，这完全被忽略了。

是不是因为<dl>元素不能接受列表样式？这似乎非常倒退，毕竟它是一个列表元素!

还是我的标记有问题？

这是我的代码 CSS 和 HTML 的示例:

dl { list-style: decimal; }

<dl class="some-list">

  <dt><strong>Q</strong>: How Do I Do Some Thing?</dt>
  <dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
  </dd>

  <dt><strong>Q</strong>: How Do I Do Some Other Thing?</dt>
  <dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
  </dd>

</dl>

Answer 1

来自Mozilla docs :

The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.

您可以将 display:list-item 应用于 CSS 中的 dt 元素，然后还可以应用 list-style-type 选项

dt.wanna-be-list {
  display:list-item;
  list-style-type: square;
}