如何使用除第一项之外的项目符号列表

Question

我有一个带有子弹的无序列表，但我想要的第一个li没有子弹 我无法弄清楚如何在没有子弹的情况下只有一件物品

<ul>
    <li class="no_bullet"> item 0 </li>
    <li>item 1 </li>
    <li>item 2 </li>
    <li>item 3 </li>
</ul>

Answer 1

您可以使用list-style属性

执行此操作

li:first-child {
  list-style: none;
}

<ul>
  <li>item 0</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

如果您想选择不是第一个或最后一个的特定项目，也可以将first-child替换为nth-child(index)，例如

li:nth-child(3) {
  list-style: none;
}

Answer 2

你可以这样做：

• 使用first-child/first-of-type，不需要额外的标记（使用类）

＆＃13;

＆＃13;

li:first-child {
  list-style: none
}

＆＃13;

<ul>
  <li>item 0 </li>
  <li>item 1 </li>
  <li>item 2 </li>
  <li>item 3 </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您需要从此特定列表中删除项目符号，请将类设置为ul并按以下方式执行：

＆＃13;

＆＃13;

.list-no-bullet li:first-child {
  list-style: none
}

＆＃13;

<ul class="list-no-bullet">
  <li>item 0 </li>
  <li>item 1 </li>
  <li>item 2 </li>
  <li>item 3 </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要移除子弹，您将使用list-style: none。您还可以使用许多其他有效的样式，包括罗马数字，图像和子弹的定位：MDN

.no_bullet {
  list-style: none;
}

<ul>
  <li class="no_bullet"> item 0 </li>
  <li>item 1 </li>
  <li>item 2 </li>
  <li>item 3 </li>
</ul>