迹忆客 专注技术分享

在本文中，我们将学习在 HTML 中隐藏列表的项目符号。 开发人员可以使用 HTML 列表逐点显示相关项目。

我们可以使用 <ol> HTML 标记创建有序列表，使用 <ul> HTML 标记创建无序列表。 使用 <ul> 默认为项目符号创建黑色圆圈，同样，使用 <ol> 默认为项目符号创建数字。

现在，要将自定义图像或图标设置为项目符号点，我们需要隐藏默认项目符号点，这就是我们将在本文中执行的操作。

使用自定义 CSS 隐藏默认项目符号点

使用 CSS，我们只会隐藏下面示例中的要点。

在这里，我们创建了两个编程语言列表。 一个列表是使用 <ul> 标记创建的无序列表，另一个是使用 <ol> HTML 标记创建的有序列表。

示例代码：

<ul>
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Python</li>
  <li>Node Js</li>
  <li>Django</li>
</ol>

在下面的输出中，用户可以看到默认项目符号点的外观。

输出：

要隐藏默认项目符号点，我们将应用 list-style-type: none; 到 HTML 列表以隐藏默认项目符号点。

在下面的代码中，用户可以看到我们已经使用 ul 和 ol 标签访问了所有列表项并更改了它们的 CSS。

ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}

在下面的输出中，用户可以观察到隐藏了有序列表和无序列表的要点。

输出:

此外，开发人员可以使用内联 CSS 来隐藏特定列表项的项目符号点。 在下面的示例中，我们创建了无序列表并隐藏了某些项目的要点。

<ul>
  <li style="list-style-type: none;">Jiyik</li>
  <li>Netherlands</li>
  <li style="list-style-type: none;">Germany</li>
</ul>

在下面的输出中，用户仍然可以看到荷兰项目的项目符号点，而 DelftStack 和德国项目的项目符号点被隐藏，因为我们应用了列表样式类型：无； 使用内联 CSS。

输出：

在本文中，我们了解了如何消除所有项目的要点。 此外，我们还看到了带有隐藏特定列表项要点的输出的示例代码。