删除导航栏末尾的导航分隔线 - 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工作{右边框：无;}