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

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

Answer 2

我意识到这是一个老问题，但我发现它试图遍历 DOM。我发现“:has()”也可以工作，没有父项类，并且比第一个子项有更多的控制权：

li:has(> #trigger):hover + li > #target {color:red}

或者就我而言，禁用复选框：

.aspNetDisabled:has(> input:disabled:checked) + .slider {...