Невозможно удалить правую границу последнего элемента навигации

Question

Я тестирую навигацию с белой рамкой между пунктами меню. Я хочу удалить границу после последнего пункта меню. Я пытался использовать "li: last-child", но он не работает. Буду признателен, если этот пост не будет удален "из-за похожих постов". Если я пишу здесь, это очевидно, потому что я попробовал все из подобных постов, и они не работали. Это очень неприятно для нового пользователя.

HTML:

<nav id="navbar">
        <ul>
       <li><a class="top-nav" id="home" href="#home">Home</a></li>
       <li><a class="top-nav" id="about-me" href="#about-me">About Me</a></li>
       <li><a class="top-nav" id="my-work" href="#my-work">My Work</a></li>
       <li><a class="top-nav" id="contact" href="#contact">Contact</a></li>
        </ul>
      </nav>

CSS:

nav {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    background-color: #000033;
    height: 45px;
}

li {
    list-style-type: none;
    float: right;
    border-right: 2px solid white;
}

li:last-child {
    border-right: hidden !important;
}

li a {
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}

Answer 1

Попробуйте:

li:first-child {
  border-right: hidden;
}

вместо этого:

li:last-child {
  border-right: hidden !important;
}

Вам не нужен !important, потому что псевдокласс первого ребенка следует за правила специфичности CSS

См. этот код ручки

Answer 2

Вы можете попробовать удалить границу правого края li и добавить это, если вы использовали современный браузер:

li:not(:first-child) { 
     border-right: 2px solid white;
}

, если вы использовали IE или IE8, попробуйте это:

li:first-child {
    border-right: hidden;
}

Answer 3

li:last-child правильно (с border-right-color: transparent;)
, но вы должны установить float:right для UL элемента (не LI)
с display:inline для LI элементов
для сохраняйте порядок отображения таким же образом, как вы html код.

nav#navbar {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  background-color: #000033;
  height: 45px;
  }
nav#navbar ul {
  float: right;
  list-style-type: none;
  }
nav#navbar ul li {
  display: inline;
  border-right: 2px solid white;
  }
nav#navbar ul li:last-child {
  border-right-color: transparent;
  }
nav#navbar a {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

<nav id="navbar">
  <ul>
    <li><a class="top-nav" id="home" href="#home">Home</a></li>
    <li><a class="top-nav" id="about-me" href="#about-me">About Me</a></li>
    <li><a class="top-nav" id="my-work" href="#my-work">My Work</a></li>
    <li><a class="top-nav" id="contact" href="#contact">Contact</a></li>
  </ul>
</nav>