css - 可以隐藏吗(显示: none;) the definition term () in a definition list ()?

Question

所以我有一个菜单项列表，我想弄清楚我是否应该使用具有类属性的跨度或每个元素的特征的定义列表。以下是我正在考虑的两个选项:

选项 1)

// HAML Markup

%article.menu-item
  %span.name
    Cereal
  %span.price
    4.00
  %span.description
    We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
}

选项 2)

// HAML Markup

%article.menu-item
  %dl
    %dt
      Item
    %dd
      Cereal
    %dt
      Price
    %dd
      4.00
    %dt
      Description
    %dd
      We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
  dt { display: none; }
}

我目前使用的是选项 1，但出于某种原因，选项 2 在我看来语义更丰富，因为它定义了产品。我应该选择哪个选项，为什么？

Answer 1

如果您打算使用第二个，则不应使用 display: none;。您最好将文本放置在屏幕外，这样屏幕阅读器仍然可以阅读。

dt {
    position: absolute;
    left: -9999px;
    top: -9999px;
}