Question

这是最简单的多级菜单的代码：

<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

这似乎可以使用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 2

: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 3

这可能会让你：

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

Answer 4

我使用了上面提供的代码并使用jsFiddle创建了一个示例。

查看示例here

添加箭头以与子项链接

4 个答案: