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

Question

我为响应式布局设置了一个无序列表，以便在每个项目的全宽度下，项目符号在每个项目后面显示“/”，在较低的宽度，“/”后缀消失，项目符号显示在垂直列表中。 / p>

因此，在全宽度处，它显示为：

  

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

我认为您的问题如下：

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

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

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

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

请注意可能不支持:last-child的非常旧的IE浏览器（7及更低版本）。

祝你好运：）

Answer 2

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

参考：http://www.w3.org/TR/css3-selectors/#last-child-pseudo

.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>