Question

在下面的代码中，我将向下数组（通过生成的内容）添加到具有子菜单的顶级元素。我正在向带有子菜单的子菜单元素添加右箭头。

但是，我需要一些帮助，因为如果父母有孩子，它会将箭头应用于所有子元素。我只需将它应用于那些有孩子的元素。

<ul id="menu-site-menu">
    <li class="hasChild top"><a href="#">About Us</a>
        <ul class="sub-menu">
            <li><a href="#">Our Charity Partners</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </li>
    <li class="hasChild top"><a href="#">Buy Apparel</a>
        <ul class="sub-menu">
            <li class="hasChild sub"><a href="#">Benevolent Elephant</a>
                <ul class="sub-menu">
                    <li><a href="#">Benevolent Elephant Short Sleeve</a></li>
                    <li><a href="#">Benevolent Elephant Long Sleeve</a></li>
                </ul>
            </li>
            <li class="hasChild sub"><a href="#">Eagle-Spirit</a>
                <ul class="sub-menu">
                    <li><a href="#">Eagle-Spirit Short Sleeve</a></li>
                    <li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Customer Service</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

css在

之下

.hasChild.top a:after {
    content: ' ';
    height: 0;
    position: absolute;
    bottom:-5px;
    right:-5px;
    width:0;
    border: 5px solid transparent;
    border-top-color: #ccc;
}
.hasChild.sub a:after {
    content: ' ';
    height: 0;
    position: absolute;
    bottom:0;
    right:-5px;
    width:0;
    border: 5px solid transparent;
    border-left-color: #ccc;
}

Answer 1

添加子选择器>：

.hasChild.top > a:after { 
} 
.hasChild.sub > a:after { 
}

如何将css仅应用于一个级别的列表项（而不是子元素）

1 个答案: