选择邻近的孩子......怎么样？

试图选择与CSS相邻的子元素......真的不知道怎么这是HTML结构选择邻近的孩子......怎么样？

<ul> 
    <li> 
     <a href="#"> 
      <span class="icon"></span> 
      First level 
     </a> 
     <ul> 
      <li> 
       <a href="#">Second level</a> 
      </li> 
     </ul> 
    </li> 
</ul>

我想说的是，有多个层次的菜单。当UL中存在UL时，需要有一个下拉/展开图标...所以我想如果我使用相邻的选择器，我可以确定这个级别是否有孩子可以扩展，这是我认为会工作，但didn “T：

ul li a ~ ul .icon { 
    // doesnt work 
} 
ul li a .icon ~ ul { 
    // doesnt work 
}

这工作，但我需要为目标的.icon

ul li a ~ ul { 
    // works 
}

干杯，大教堂

来源

2011-12-19 Dominic Watson

不幸的是，你不能用CSS选择原路返回。它必须在之后;它不可能在之前。 – Ryan

HTML是如何生成的？或者它是静态的？如果你可以控制DOM如何生成，那么我想一个解决方法是将一个'class =“has-submenu”'或类似的东西添加到外部li，如果列表项有一个子菜单的话。然后用它来选择。 –

添加了上述解决方案的示例作为答案。 –

建立在我对你的问题的评论。如果您可以控制如何生成菜单的HTML，则解决方法是向每个包含子菜单的li元素添加一个额外的类。就像这样：

<ul> 
    <li class="has-submenu"> 
     <a href="#"> 
      <span class="icon"></span> 
      First level 
     </a> 
     <ul> 
      <li> 
       <a href="#">Second level</a> 
      </li> 
     </ul> 
    </li> 
</ul>

那么你可以使用一个选择是这样的：

.has-submenu .icon { 
    /* Do your stuff here */ 
}

来源

2011-12-19 23:02:56

谢谢，我想答案是否定的，这是不可能的：D将不得不添加类建议 –

@DominicWatson是的，恐怕你坚持这一点。有时CSS有点受限。 –

UL是李的孩子，而不是锚。所以ul li ul。
如果你想选择它作为兄弟姐妹，然后ul li a + ul

来源

2011-12-19 22:51:07 Rob

这是可以理解的，但实际上问题是针对元素（'li'）（无论树中有多深）有另一个'ul'来处理某些元素之前（'.icon'） –

恐怕那不会这样做。它认为他正在寻找像CSS中的if语句（这不存在）。如果li元素包含另一个ul，那么他希望修改anchor中的.icon范围。 –

选择邻近的孩子......怎么样？

回答

相关问题