向只有子菜单的菜单项添加下拉箭头指示符？答案

【问题标题】：Add dropdown arrow indicators to menu items that have submenus only?向只有子菜单的菜单项添加下拉箭头指示符？
【发布时间】：2020-04-15 15:12:22
【问题描述】：

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

目前我正在使用这个 CSS：

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

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

谢谢！

【问题讨论】：

您需要 JS/Jquery 来执行此操作...或者向父级添加一个类 li
没有。 CSS 没有 contains child 选择器。
也许使用前选择器而不是后选择器？
@BrianGlaz 这有什么帮助？
菜单的 HTML 是什么样的？

标签： css navigation html-lists submenu

【解决方案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

【讨论】：

不错！不过，我更喜欢 float: right; 上的 ▸ char。您可能希望 \25B8 在 CSS 中对其进行转义。
很好，但是我的安卓设备浏览器（chrome）中没有显示这个箭头。为什么会这样？有什么建议吗？

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：