最後一個孩子選擇器不能在導航菜單上工作

Question

我在添加分隔符「|」到使用:after選擇器的每個菜單項。這也將它添加到最後一個元素。我一直在嘗試使用:last-child選擇器刪除它，但它不起作用。

我會在下面列出我的代碼，並提供一個jsfiddle鏈接。

HTML：

<nav id="nav_bar"> 
    <div> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Company Profile</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
    </div> 
</nav> 

CSS：

#nav_bar { 
    background-color: #debb23; 
    height: 45px; 
} 

#nav_bar ul{ 
    list-style-type: none; 
} 

#nav_bar ul li{ 
    display: inline-block; 
    margin: 10px 0; 
} 

#nav_bar ul li a{ 
    color: #ffffff; 
    text-decoration: none; 
    padding: 0 15px; 
} 

#nav_bar ul li:after{ 
    content: "|"; 
    color: #ffffff; 
} 

#nav_bar ul li:last-child { 
    content: none; 
} 

這裏的鏈接的jsfiddle，http://jsfiddle.net/e3x369k0/

我感謝所有幫助。

Answer 1

您針對的是最後一個li元素的內容，而不是它的:after僞元素的內容。

#nav_bar ul li:last-child { 
    content: none; 
} 

到

#nav_bar ul li:last-child:after { 
    content: none; 
} 

活生生的例子：

從改變你的選擇http://jsfiddle.net/5x55emaf/

Answer 2

你在過去的CSS規則缺失:after。應該是這樣的：#nav_bar ul li:last-child:after

Answer 3

試試這個，我一直在使用這種技術在幾年:)

#nav_bar ul li{ 
border-right:1px solid black; 
} 

#nav_bar ul li:last-child{ 
border-right: 1px solid tranparent; 
}