删除导航栏末尾的导航分隔符 - HTML / CSS

Question

我在删除“C＆C”之后的最后一个边界分隔线时遇到问题。我想保留导航列表中每个元素右边的边框，而不是最后一个边框。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用：last-child css选择器。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

参考：MDN

Answer 2

添加此规则：

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

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

Answer 3

另一种解决方案是将课程添加到最后一个{其中李不需要边框}并将样式写入课程。

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

Demo link

Answer 4

：last-child在IE9以下不起作用

使用它可以在所有浏览器上使用

a＃button2 {border-right：none;}