Удалить навигационный разделитель в конце панели навигации - HTML/CSS

Question

У меня возникли проблемы с удалением последнего разделителя границ после «ЧАСТИ 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

Используйте это будет работать на всех браузер

A # button2 {границы права: нет;}