Question

我有一个像这样的HTML ul li：

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

所以我想通过CSS隐藏上一个|。我尝试了这个，但它隐藏了所有|

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

我想要像这样的最终输出

Title 1 | Title 2 | Title 3

请注意：我的问题与this question无关，因为它一直在添加|，但我的HTML中已经有管道|，所以我只想隐藏最后一次出现。

Answer 1

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

Answer 2

使用此CSS

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

Answer 3

你做错了。这是正确的答案：

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

Answer 4

你可以试试这个：

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

Answer 5

最好还是使用更多语义标记并使用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改变分隔符

Answer 6

你很接近它。跟李元素一起去。

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>

如何隐藏最后|用CSS？

6 个答案: