html - 使用 CSS 选择器遍历 HTML 标签树

Question

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

Answer 1

您可能需要相邻的同级选择器:

#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 {}

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