html - 悬停在 `li` 上，换下一个风格？

Question

我有一个导航栏。
每个元素的右侧都有边框(第一个除外，它有左右边框)。

我正在寻找一种方法来隐藏下一个/上一个 li 的右边框，不允许重复边框。

您可以在第一项的右侧看到较浅的边框。
我需要隐藏第一个元素的右边框或隐藏第二个元素的左边框，而是激活第一个元素的右侧。

我正在查看 CSS 选择器，但几乎找不到任何东西。

几乎所有的选择器都是为了从父级中选择一个子级。

---

CSS

#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0;
margin-top: 25px;
z-index: 9;
left: 0;
display: inline;
text-align: center;
}

#nav li {
list-style: none;
display: inline;
padding: 7px;
margin-left: 2px;
margin-right: 2px;
height: 100%;
border-right: 1px solid #E3E3E3;
transition: 0.2s ease;
}

#nav li:nth-of-type(1) {
border-left: 1px solid #E3E3E3;
}


#nav li:hover:nth-of-type(1) {
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}

#nav li:hover:nth-of-type(2){
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}

#nav li:hover:nth-of-type(2) #nav li:nth-of-type(1){
border-left: 0px solid transparent;
}

HTML

<nav id="nav">
<li>Etusivu</li>
<li>Tietoa Meistä</li>
<li>Hinnasto</li>
<li>Yhteystiedot</li>
</nav>

---

FIDDLE

抱歉解释困惑。

Answer 1

http://jsfiddle.net/qp6sd0hc/

将 -7px margin-left 分配给 nav li 因为默认情况下内联显示会在元素之间留出一些边距

 nav li{ margin-left: -7px; }