Php 添加箭头以链接子对象

下面是最简单的多级菜单代码：

<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也可以。我希望它可以跨浏览器使用。但现在我甚至不知道从哪里开始

非常感谢

only-child伪选择器选择作为其父元素的唯一子元素的元素。您可以在CSS3中使用它来设置不带箭头的元素的样式，从而覆盖带箭头的元素。您可以使用例如：first of type pseudoselector作为主选择器，以防止不支持：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;
}

：only-child伪选择器选择作为其父元素的唯一子元素的元素。您可以在CSS3中使用它来设置不带箭头的元素的样式，从而覆盖带箭头的元素。您可以使用例如：first of type pseudoselector作为主选择器，以防止不支持：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;
}

---

这可能会让你走：

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

---

这可能会让你走：

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

---

这似乎在使用jquery时起作用。。。您可以将特殊类自定义为带有错误的背景图像或任何您想要的

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

---

这似乎在使用jquery时起作用。。。您可以将特殊类自定义为带有错误的背景图像或任何您想要的

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

---

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

---

查看示例

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

---

查看示例

当IE8退出后，大约5年后：独生子女和：第一个类型选择器将成为跨浏览器。@Šime Vidas，OP提到CSS3并使用HTML5；我真的怀疑他们想要完美的IE兼容性。在我的示例中使用：第一种类型的目的是防止旧浏览器执行OP中提到的跨浏览器就绪的意外操作。IE6到IE8的市场份额之和目前不容忽视。当IE8下降时，“独生子”和“第一个”类型选择器将在大约5年后成为跨浏览器。@Šime Vidas，OP提到CSS3并使用HTML5；我真的怀疑他们想要完美的IE兼容性。在我的示例中使用：第一种类型的目的是防止旧浏览器执行OP中提到的跨浏览器就绪的意外操作。IE6到IE8的市场份额之和目前非常大，不容忽视。+1-尽管您可以将其缩短为$'ul a+ul'。prev.addClass'special'+1-虽然您可以将其缩短为$'ula+ul'。prev.addClass'special'；