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に影響を与えることは可能ですか？

4

1 に答える 1

4

おそらく、隣接する兄弟セレクターが必要です。

#trigger:hover + #target {}

または、兄弟コンビネータで、2番目の要素が直接隣接している必要はありません。

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

あなたとブラウザの両方を節約することはいくつかの仕事です。

于 2013-01-14T19:58:29.103 に答える