在项目符号内联显示的 <ul> 中设置单个项目符号的样式

Question

我为响应式布局设计了一个无序列表的样式，以便在全宽时项目符号显示内联，每个项目符号后带有“/”，而在较低宽度时“/”后缀消失并且项目符号显示在垂直列表中.

因此，全角显示为：

bullet 1 / bullet 2 / bullet 3 / bullet 4 /

在较低的宽度：

bullet 1
bullet 2
bullet 3
bullet 4

在每个项目符号后添加'/'的CSS如下：

.info li:after {content: " /";}

以及列表的 html：

<div class="info">
    <ul>
    <li >bullet 1</a>
    </li>  ... and so on

我只想从 最后一个项目符号 中删除“/”，因此显示如下：

bullet 1 / bullet 2 / bullet 3 / bullet 4

我试过用这两种方法给最后的项目符号添加一个 ID，但都没有用：

#noStroke {content: "";} 
#noStroke li:after {content: "";}

谁能建议如何从最后一个项目符号中删除“/”？

注意：仅在每个项目符号后键入 / 不起作用，因为我不希望它们以较低的分辨率显示！

Answer 1

使用 :last-child 伪 class 选择器。

.info li:after {
  content: " /";
}
.info li:last-child:after {
  content: "";
}

<div class="info">
  <ul>
    <li>bullet 1</li>
    <li>bullet 2</li>
    <li>bullet 3</li>
    <li>bullet 4</li>
  </ul>
</div>

Answer 2

我认为你的问题如下：

您是否将 id 放在了 li 元素上？在那种情况下尝试

.info li#noStroke:after {content: none;}

或者，您不需要对最后一个元素使用 id，您可以只使用：

.info li:last-child:after {content: none;}

小心可能不支持 :last-child.

的非常旧的 IE 浏览器（7 及更低版本）

祝你好运:)

Styling individual bullets in a <ul> where bullets are displayed inline