刪除導航欄末尾的導航分隔線 - HTML/CSS

Question

我在'PART C'後刪除最後一個邊框分隔線時遇到問題。我想保留導航列表中每個元素右側的邊界，而不是最後一個。

a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    display: block; 
 
    width: 150px; 
 
} 
 
li { 
 
    list-style: none; 
 
    float: left; 
 
    padding-left: 10px; 
 
    width: 150px; 
 
} 
 
ul { 
 
    width: 900px; 
 
    margin: 0px auto; 
 
} 
 
.nav { 
 
    padding: 25px 50px 10px 0px; 
 
    z-index: 1; 
 
    font-family: "Avenir"; 
 
} 
 
.nav a:hover { 
 
    color: #cccccc; 
 
} 
 
.nav a { 
 
    color: #000; 
 
    display: block; 
 
    line-height: 14px; 
 
    padding-left: 10px; 
 
    padding-right: 30px; 
 
    text-decoration: none; 
 
    border-right: 1px solid #000; 
 
    text-align: center; 
 
    width: 100px; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">ABOUT ME</a> 
 
     </li> 
 
     <li><a href="#" id="button">PART A</a> 
 
     </li> 
 
     <li><a href="#" id="button1">PART B</a> 
 
     </li> 
 
     <li><a href="#" id="button2">PART C</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你可以使用：最後一個孩子 CSS選擇器。

a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    display: block; 
 
    width: 150px; 
 
} 
 
li { 
 
    list-style: none; 
 
    float: left; 
 
    padding-left: 10px; 
 
    width: 150px; 
 
} 
 
ul { 
 
    width: 900px; 
 
    margin: 0px auto; 
 
} 
 
.nav { 
 
    padding: 25px 50px 10px 0px; 
 
    z-index: 1; 
 
    font-family: "Avenir"; 
 
} 
 
.nav a:hover { 
 
    color: #cccccc; 
 
} 
 
.nav a { 
 
    color: #000; 
 
    display: block; 
 
    line-height: 14px; 
 
    padding-left: 10px; 
 
    padding-right: 30px; 
 
    text-decoration: none; 
 
    border-right: 1px solid #000; 
 
    text-align: center; 
 
    width: 100px; 
 
} 
 
.nav li:last-child a { 
 
    border-right: none; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">ABOUT ME</a> 
 
     </li> 
 
     <li><a href="#" id="button">PART A</a> 
 
     </li> 
 
     <li><a href="#" id="button1">PART B</a> 
 
     </li> 
 
     <li><a href="#" id="button2">PART C</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

參考：MDN

Answer 2

添加這條規則：

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

演示：http://jsfiddle.net/lotusgodkk/Lewza63r/

Answer 3

另一種解決方案是添加類到最後李一{其利沒有按」 t需要邊框}併爲課堂寫作風格。

'a.no_border { border-right: 0; }' 

Demo link

Answer 4

：最後一個孩子不低於IE9工作

使用這一點，將在所有的瀏覽器

一個＃BUTTON2工作{右邊框：無;}