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

问题描述 投票:0回答: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吗?

html css css-selectors
2个回答
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 {}

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


0
投票

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

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

或者就我而言,禁用复选框:

.aspNetDisabled:has(> input:disabled:checked) + .slider {...
© www.soinside.com 2019 - 2024. All rights reserved.