css - 向只有子菜单的菜单项添加下拉箭头指示器？

Question

我目前正尝试在我的导航菜单上为具有子菜单选项的元素添加箭头指示器。

目前我正在使用这个 CSS:

.mainNav li > a:after {
   color: #444;
   content: ' ▾';
}

但这会为每个 <li> 添加一个下拉箭头不管是否有子菜单。有没有办法只使用 CSS 将此箭头添加到具有子元素的元素？

谢谢!

Answer 1

没有。 CSS 没有 contains child 选择器。您最好只向 li 元素添加一个类。例如:

<li class="has-child">
    <a href="#">The Link</a>
    <ul class="child">
        <li>Child 1</li>
    </ul>
</li>

您的 CSS 选择器依次如下所示:

.mainNav li.has-child > a:after {
   color: #444;
   content: ' ▾';
}

如果可以的话，您可以让 jQuery 为您添加类:

$('.mainNav li:has(ul)').addClass('has-child');

jsFiddle Demo