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

保存你和浏览器都有些工作。

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

1 个答案: