css - 选择具有特定子元素的元素？

Question

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

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

我只想对包含标签li:hover的 s 产生影响，有没有办法在 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