如何隐藏最后一个|与CSS？

-1

我有一个HTML ul li这样的：如何隐藏最后一个|与CSS？

<ul id="menu-footer-menu" class="menu"> 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
     <a href="http://example.com/link1/">Title 1</a> 
     <span class="f_sep">|</span> 
    </li> 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
     <a href="http://example.com/link2/">Title 2</a> 
     <span class="f_sep">|</span> 
    </li> 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
     <a href="http://example.com/link3/">Title 3</a> 
     <span class="f_sep">|</span> 
    </li> 
</ul>

其输出这样

Title 1 | Title 2 | Title 3 |

所以throught CSS我想隐藏最后|。我试过，但它是hidding所有|

#menu-footer-menu .f_sep:last-child{display:none}

我想这样最后输出

Title 1 | Title 2 | Title 3

请注意：因为它是通过添加|我的问题是不相关的this question，但我已经在我的HTML管道|，所以我只想隐藏最后一次出现。

来源

2017-03-14 Promit

的[添加管式分离机在一个无序列表项目后，除非该项目是最后一行]可能的复制（ http://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-an-unordered-list-unless-that-item-is-the-la） – marmeladze

＃menu-footer-菜单li：最后一个孩子 –

@marmeladze：请阅读我的_请注意_部分。希望它是有道理的。 – Promit

你做错了。下面是正确答案：

#menu-footer-menu li:last-child .f_sep{ display:none }

来源

2017-03-14 05:29:33

你可以试试这个：

ul li:last-child span { 
    display: none; 
}

来源

2017-03-14 05:29:59 Mers

-1

你接近它。只要与李元素去。

li:last-child span{ 
 
    display:none; 
 
    }

<ul id="menu-footer-menu" class="menu"> 
 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
 
     <a href="http://example.com/link1/">Title 1</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
 
     <a href="http://example.com/link2/">Title 2</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
 
     <a href="http://example.com/link3/">Title 3</a> 
 
     <span class="f_sep">|</span> 
 
    </li> 
 
</ul>

来源

2017-03-14 05:32:16

#menu-footer-menu li:last-child .f_sep{ 
    display: none; 
}

来源

2017-03-14 05:33:12

使用此CSS

#menu-footer-menu li:last-child .f_sep{display:none}

来源

2017-03-14 05:37:09

更妙的是使用更多的语义标记和使用CSS显示分频器

#menu-footer-menu{list-style:none; padding:0;} 
 

 
#menu-footer-menu li {display:inline-block;} 
 

 
#menu-footer-menu li:not(:last-child):after 
 
{ 
 
    content: "|"; 
 
}

<ul id="menu-footer-menu" class="menu"> 
 
    <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356"> 
 
     <a href="http://example.com/link1/">Title 1</a> 
 
    </li> 
 
    <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357"> 
 
     <a href="http://example.com/link2/">Title 2</a> 
 
    </li> 
 
    <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358"> 
 
     <a href="http://example.com/link3/">Title 3</a> 
 
    </li> 
 
</ul>

这样做的好处是你可以改变分频器与CSS

来源

2017-03-14 05:41:07

我不能这样做，因为插件正在生成此代码，所以我必须通过CSS删除它;但感谢您的帮助。如果我必须自己制作'ul li'，我会使用这种方法。 – Promit

如何隐藏最后一个|与CSS？

回答

相关问题