2 
<div>
  <div class="header">
    <div id="navbar" >
      <ul id="nav">
        <li><a id="trigger"><span><p></p></span></a></li>
        <li><a id="target"><span><p></p></span></a></li>
      </ul>
    </div>
  </div>
</div>

嘿伙计们，我有一个问题，如果它不会给你们带来任何不便，与遍历 HTML 树有关。

我已经知道如何<a id="trigger"></a>使用以下语法进行选择：

div>div.header>div#navbar>ul#nav>li>a#trigger:hover {CSS}将触发更改。

但问题来了，我想定位<a id="target""></a>它下面的标签，但我还没有找到访问<a id="affected"></a>那里的正确语法。

我希望当我悬停 id="trigger" 时，id="target" 会受到影响。

我已经尝试使用 + 选择器来定位该 id，唉，试验以徒劳的方式结束。

是否有可能影响该ID？

4

1 回答 1

4

您可能需要相邻的兄弟选择器：

#trigger:hover + #target {}

或者可能是兄弟组合器，它不需要第二个元素直接相邻：

#trigger:hover ~ #target {}

http://css-tricks.com/child-and-sibling-selectors

更新：正如下面评论中所述，选择器实际上必须是兄弟姐妹。在原始结构中，它们不是。

<div>
  <div class="header">
    <div id="navbar" >
      <ul id="nav">
        <li class="one"><a id="trigger">Trigger</a></li>
        <li class="two"><a id="target">Target</a></li>
      </ul>
    </div>
  </div>
</div>

.one:hover + .two {color: red}

http://jsfiddle.net/5Gmz9/1/

这是另一种不需要 li 元素上的类或 ID 的方法：

#nav li:first-child:hover + li {color: red}

http://jsfiddle.net/5Gmz9/2/

每种方法都有其缺陷。

顺便一提，

div>div.header>div#navbar>ul#nav>li>a#trigger:hover {}

可能写得很好

#navbar #trigger:hover {}

为您和浏览器节省一些工作。

于 2013-01-14T19:58:29.103 回答