将下拉箭头指示符添加到仅包含子菜单的菜单项？

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');