如何刪除導航欄上的最後一個邊框？

首頁|新聞|關於我們|

如何在「關於我們」後刪除該行？

HTML

<nav> 
    <ul> 
     <li> 
      <a href="index.php">HOME</a> 
     </li> 
     <li> 
      <a href="news.php">NEWS</a> 
     </li> 
     <li> 
      <a href="aboutus.php">ABOUT US</a> 
     </li> 
    </ul> 
</nav>

CSS

nav { 
    float:right; 
    clear:right; 
    width:40%; 
    margin:0; 
    margin-top:30px; 
    margin-right:8%; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
    font-family: Microsoft Yi Baiti; 
} 

nav ul li{ 
    list-style: none; 
} 

nav ul li a{ 
    text-decoration: none; 
    float: left; 
    display: block; 
    padding: 10px 30px; 
    color: black; 
    border-right: 1px solid #ccc; 
} 

nav ul li a:hover { 
    transition: all .2s ease-in; 
    color: rgb(204,204,204); 
} 


nav li.last { 
    border: none ; 
}

在CSS我試圖刪除邊框最後一行，但遺憾的是沒有工作。誰能幫忙？謝謝！

來源

2015-12-02 Bob

使用您li的:last-child僞類和目標錨標記。

像這樣：

nav ul li:last-child a{ 
    border-right: none; 
}

來源

2015-12-02 19:28:18 wmeade

您在a標記上有邊框，而不是li。另外li沒有一類last所以使用:last-child。你想針對這樣的：

nav li:last-child a { 
    border: none; 
}

小提琴：http://jsfiddle.net/pqe9hc6y/

來源

2015-12-02 19:27:59 AtheistP3ace

如何刪除導航欄上的最後一個邊框？

回答

相關問題