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

如果我想这样的名单上做了CSS选择器：选择具有特定孩子的元素？

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

，我想要做的只包含一个<a>标签li个li:hover效果，有没有指定的方式CSS？ if li:hover contains <a> then li:hover effect = X?

2013-01-24 proseidon

CSS不允许你“达到回”向上级联链基于儿童改变父母的布局。 –

[复杂的CSS选择器为父活动子]的可能的副本（http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child） –

请参阅https：// stackoverflow .com/questions/1014861/is-there-a-css-parent-selector –

不，CSS不允许你根据他们的后代选择元素。

2013-01-24 19:56:12 Jon

你可以做到这jQuery中：

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

对你的要求是什么，这将是这样的：

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

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

});

2013-01-24 19:56:14

根据您的最终目标，什么效果，你可以申请样式到锚标签 - 然后不适用于那些没有标签的列表项。

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

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

2013-01-24 20:01:26 Mark

好的，谢谢。我想也许用新的CSS选择器类型有一种方法可以在CSS中实现，但我想我必须等待CSS4：P – proseidon

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

$li:hover a { ... }

如果不要紧就是标签中，你可以只使用：

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

：空的选择是不是在IE7支持。

jQuery的替代方法是：

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

2013-01-24 20:49:16

回答