html - 在元素符号内联显示的 <ul> 中设置单个元素符号的样式

Question

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

所以，在全 Angular 显示:

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 及更低版本)。

祝你好运:)