css - 特定の子を持つ要素を選択していますか?

Question

次のようなリストで CSS セレクターを実行したい場合:

<ul>
    <li></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

タグを含む sli:hoverのみに効果を出したいのですが、CSS でそれを指定する方法はありますか?li<a>if li:hover contains <a> then li:hover effect = X?

score 5 · Accepted Answer

5

いいえ、CSS では、子孫に基づいて要素を選択することはできません。

于 2013-01-24T19:56:12.143 に答える

score 1 · Accepted Answer

JQUERYでそれを行うことができます：

$("a").parent("li").css("color","#923123");

あなたが要求したものについては、次のようになります。

$("li").mouseover(function(){

   if ($(this).is(':parent'))
   {
       //this <li> has a child, supposed to be <a>
   }

});

score 0 · Accepted Answer

最終的な目的と効果に応じて、スタイルをアンカータグに適用できます。これがないと、これらのリストアイテムには適用されません。

または、CSSで直接これを行うことはできませんが、リストが動的であり、生成時にリンクを含むリストアイテムを識別できる場合は、それに応じてステータスとスタイルに基づいてクラスを適用できます。

動的リストでない場合は、クラスを手動で追加するだけです。

score 0 · Accepted Answer

そのためには CSS4 の親セレクターが必要ですが、もちろん現時点ではサポートされていません。

$li:hover a { ... }

内部にどのタグが含まれているかが重要でない場合は、次を使用できます。

li:hover {border:1px solid red}
li:empty:hover {border:0}

:empty セレクターは ie7 ではサポートされていません。

Jquery の代替手段は次のとおりです。

$("li:has('a')").hover(function() { ... },function(){ ...  })

4 に答える 4