添加箭头儿童

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