選擇鄰近的孩子......怎麼樣？

試圖選擇與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範圍。 –

選擇鄰近的孩子......怎麼樣？

回答

相關問題