选择具有特定孩子的元素？

Question

如果我想在这样的列表上做一个CSS选择器：

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

我希望仅对包含li:hover标记的li执行<a>效果，有没有办法在CSS中指定？ if li:hover contains <a> then li:hover effect = X?

Answer 1

不，CSS不允许您根据其后代选择元素。

Answer 2

你可以在JQUERY中做到：

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

根据您的要求，它会是这样的：

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

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

});

Answer 3

根据您的最终目标和效果，您可以将样式应用于锚标记 - 然后不适用于没有标记的列表项。

或者，虽然您不能直接在CSS中执行此操作，但如果列表是动态的，并且您可以在生成时识别包含链接的列表项，则可以根据其状态和样式相应地应用类。

如果它不是动态列表，只需手动添加类。

Answer 4

为此你需要一个CSS4父选择器，但当然现在不支持它。

$li:hover a { ... }

如果内部标记不重要，您可以使用：

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

：ie7中不支持空选择器。

http://jsfiddle.net/aD6Ws/

Jquery替代方案是：

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