将 <ol> 与 list-style-type: disc; 一起使用有什么区别？和 <ul> [重复]答案

【问题标题】：What is the difference in using <ol> with list-style-type: disc; and <ul> [duplicate]将 <ol> 与 list-style-type: disc; 一起使用有什么区别？和 <ul> [重复]
【发布时间】：2021-12-25 19:58:30
【问题描述】：

分享一个示例 sn-p。从视觉上看，<ul> 和 <ol> 看起来都一样。那为什么我们需要单独<ul>呢？

<head>
    <title>Change Numbering Type in an HTML Unordered List Using CSS</title>
    <style>
        ol {
            list-style-type: disc;
        }
    </style>
</head>
<body>
    <ol>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ol>
  <hr/>
    <ul>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ul>
</body>
</html>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

是的，正如您所说，我们可以使用一些 CSS 更改有序列表的视觉表示。我们可以对ul 做同样的事情，并让它显示小数。 ul { list-style: decimal; }

有序列表和无序列表以相同的方式呈现，只是视觉用户代理默认为有序列表项编号。当然，我们可以改变它们的出现方式。但是，列表类型的选择所表达的语义意义不能通过 CSS 改变。

辅助技术包括对用于指示编号和项目符号样式的 type 属性的各种用途的不一致支持，因此是出于可访问性目的。一些辅助技术允许用户从一个列表导航到另一个列表或从一个项目导航到另一个项目。样式表可用于更改列表的显示方式，同时保持其完整性。

ol { list-style: disc; }


ul { list-style: decimal; }

<ol>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ol>
  <hr/>
    <ul>
        <li>Fasten your seatbelt</li>
        <li>Starts the car's engine</li>
        <li>Look around and go</li>
    </ul>

【讨论】：

【解决方案2】：

这是个好问题。是的，如果我们添加list-style-type: disc;，两者看起来都一样。但有些初学者并不知道这一点。所以他们会在那个地方使用 UL。

其实你可以用list-style-type:在里面添加不同的种类。

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.roman {list-style-type: upper-roman;}
ol.alpha {list-style-type: lower-alpha;}

<ul class="circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol class="roman">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="alpha">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

您可以根据需要使用任何您想要的东西。

【讨论】：

【解决方案3】：

在语义上，ul 是一个无序列表，ol 是一个有序列表。除非样式已被覆盖，否则ul 应为您提供项目符号，ol 应为您提供数字。

当项目的顺序对用户正确解释它们很重要时，某些辅助技术也有可访问性优势。

【讨论】：

【解决方案4】：

默认<ul>和<ol>标签作为它们自己的列表样式类型，当你设置样式时，使用<ul>或<ol>标签并不重要，即使你可以使<ol>按各自的样式标记为字母或数字，

总之，当您决定为它们设置样式时，您选择哪个标签实际上并不重要。

【讨论】：

这可能对可访问性很重要——ol 和 ul 有不同的含义，与视觉外观无关。