<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吗?
您可能需要相邻的同级选择器:
#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}
这是另一种方法,不需要 li 元素上的类或 ID:
#nav li:first-child:hover + li {color: red}
每种方法都有其陷阱。
顺便说一句,
div>div.header>div#navbar>ul#nav>li>a#trigger:hover {}
可能写得和
一样好#navbar #trigger:hover {}
为您和浏览器节省一些工作。
我意识到这是一个老问题,但我发现它试图遍历 DOM。我发现“:has()”也可以工作,没有父项类,并且比第一个子项有更多的控制权:
li:has(> #trigger):hover + li > #target {color:red}
或者就我而言,禁用复选框:
.aspNetDisabled:has(> input:disabled:checked) + .slider {...