将下拉箭头指示器添加到仅具有子菜单的菜单项

Question

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

目前我正在使用这个 CSS：

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

但这会为每个<li>添加一个下拉箭头，无论是否有子菜单。有没有办法只用 CSS 将此箭头添加到具有子项的项目？

谢谢！

Answer 1

No.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 演示

Answer 2

CSS 没有contains child选择器。但是，它具有各种sibling选择器，only-child和not(:only-child)由于您向锚点添加了指示器，因此请使用以下 CSS

 .mainNav li>a:not(:only-child):after {
       color: #444;
       content: ' ▾';
    }

<div class="mainNav">
    <li>
        <a href="#">The item with child</a>
        <ul class="child">
            <li>Child 1</li>
        </ul>
    </li>
    <li>
        <a href="#">No child item</a>
    </li>
</div>

Answer 3

是的，你可以没有任何jQuery：https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/