html - 为什么 ~ 选择器在这里不起作用？

Question

在导航菜单中，我有一个适用于所选部分和悬停操作的底部边框。

 <nav>
 <ul>
 <li><a href="#" id="selected">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">About</a></li>
 </ul>
 </nav>

CSS:

 nav a:hover, #selected {
 border-bottom: 1px solid pink;
 }

我想要的是当我将鼠标悬停在另一个列表项上时边框从#selected id 中消失。我试过类似的东西..

 nav a:hover ~ #selected {
 border-bottom: none;
 }

但这不管用，不管我把#selected 放在哪里。甚至使用 + 选择器。

如果可以使底部边框在 x-index 中移动到悬停的元素，可能会更好..

Answer 1

~不会像 <a> 那样扩展到“堂兄弟”元素。它仅适用于像 <li> 这样的直系 sibling

nav li:hover ~ li #selected {
    /* */
}

而且，即便如此，它也只适用于随后的 sibling 。所以，它可以找到About来自 Home ，但反之则不然。

不过，您也许可以对 <nav> 使用react或 <ul>悬停在:

nav a:hover,
#selected,
nav:hover #selected:hover /* override next selector and rule */ {
    border-bottom: 1px solid pink;
}

nav:hover #selected {
    border-bottom: none;
}

http://jsfiddle.net/6Eh8M/