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

【问题标题】：Styling individual bullets in a <ul> where bullets are displayed inline在 <ul> 中设置单个项目符号的样式，其中项目符号内联显示
【发布时间】：2016-03-17 08:43:22
【问题描述】：

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

所以，全宽显示：

项目符号 1 / 项目符号 2 / 项目符号 3 / 项目符号 4 /

在较低的宽度：

第 1 条
第 2 条
第 3 条
第 4 条

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

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

列表的html：

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

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

项目符号 1 / 项目符号 2 / 项目符号 3 / 项目符号 4

我尝试使用这两种方法在最后的项目符号中添加一个 ID，但都没有奏效：

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

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

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

【问题讨论】：

试试:last-child CSS-Tricks

标签： html css html-lists

【解决方案1】：

使用: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>

【讨论】：

感谢兄弟的回答，但上面的工作完美！

【解决方案2】：

我认为您的问题如下：

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

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

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

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

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

祝你好运:)

【讨论】：