如何僅將css應用於列表項的一個級別（不是子元素）

Question

在下面的代碼中，我將向下數組（通過生成的內容）添加到具有子菜單的頂級元素。我正在向具有子菜單的子菜單元素添加右箭頭。

但是，我需要一些幫助我的CSS，因爲它將箭頭應用於所有子元素，如果父項有子項。我只需要將它應用於那些有孩子的元素。

<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 { 
}