添加箭頭兒童

Question

鏈接下面是simpliest多級菜單的代碼：

<nav> 
    <ul> 
     <li><a href="#">I am a 1st level link</a></li> 
     <li><a href="#">I am a 1st level link with children and I want to have an arrow next to me (or different background)</a> 
      <ul> 
       <li><a href="#">I am a 2nd level link</a></li> 
       <li><a href="#">I am a 2nd level link with children and I want to have an arrow next to me (or different background)</a> 
       <ul> 
        <li><a href="#">I am a 3nd level link</a></li> 
        <li><a href="#">I am a 3nd level link</a></li> 
       </ul> 
       </li> 
      <li><a href="#">I am a 2nd level link</a></li> 
      </ul> 
     </li> 
     <li><a href="#">I am a 1st level link</a></li> 
     <li><a href="#">I am a 1st level link</a></li> 
    </ul> 
</nav> 

有沒有選擇與孩子聯繫，並加入他們不同的樣式（背景，列表樣式類型的圖標等的方法。）？菜單是動態的，因此在這種情況下給予ID或課程無濟於事。

我很想在CSS3中看到它，如果不可能的話 - jQuery或PHP會好的。我希望它能夠跨瀏覽器準備好。但目前甚至不知道從哪裏開始？

非常感謝！

Answer 1

:only-child假選擇器選擇它們父代的唯一子元素。你可以在CSS3中使用這個來設計元素而不用箭頭，用箭頭覆蓋那些。您可以使用例如主要選擇器的:first-of-type假選擇器試圖阻止不支持:only-child的瀏覽器在所有元素上顯示箭頭。

例如：

nav ul a:first-of-type { 
    /* :first-of-type for CSS3-incompat browsers; can be safely removed */ 

    /* Apply arrow code */ 
    background: ...; 
} 

nav ul a:only-child { 
    /* Undo arrow code above */ 
    background: transparent; 
} 

Answer 2

這可能讓你去：

$('li>a') 
.filter(function(){ 
    return $(this).next().is('ul') ? true : false; 
}).addClass('haveChild'); 

Answer 3

這似乎使用jQuery ...你可以定製專班爲背景圖像的錯誤工作或任何你想要的....

<script> 
    $(document).ready(function(){ 
     $('ul a + ul').each(function(){ 
      $(this).prev().addClass('special'); 
     }); 
    }); 
</script> 
<style type="text/css"> 
    .special {background-color: red;} 
</style> 

Answer 4

我用上面提供的代碼，並創建了一個使用jsFiddle的例子。

查看示例here