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

Question

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

当前我正在使用以下CSS：

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

但是这会在每个 <li> 上添加一个下拉箭头，无论是否有子菜单。是否有一种只用 CSS 就能将此箭头仅添加到具有子项的项目中的方法？

谢谢！

- user3101431

---

你需要使用JS/Jquery来实现这个功能，或者手动为父级li添加一个class。 - Paulie_D

没有 包含子元素 选择器的 CSS。 - BenM

也许使用 before 选择器而不是 after 更好？ - Brian Glaz

@BrianGlaz 那会有什么帮助吗？ - BenM

你的菜单HTML长什么样？ - Brian Glaz

content: ' ▾'; 中的空格对您没有任何好处。如果您想要跨浏览器的空白，请使用 margin 或 padding CSS 属性。 - Chad

Answer 1

没有CSS的包含子元素选择器。你最好只是给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演示

- BenM

---

不错！我更喜欢在 float: right; 上使用 ▸ 字符。 而且你可能想在 CSS 中使用 \25B8 进行转义。 - Domino

好的，但是这个箭头在我的安卓设备浏览器（Chrome）中没有显示。为什么会这样？有什么建议吗？ - Umar Asghar

Answer 2

CSS没有包含子代选择器。 但是它有各种兄弟选择器，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>

- dmpost

Answer 3

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

- Steef