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

更新:如以下评论所述，选择器实际上必须是 sibling 。在原始结构中，它们不是。

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

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