如何隐藏列表项的第四个孩子[重复]

Question

我有一个正在我的react 组件中呈现的项目列表，我想隐藏列表项的第四个子项。我有以下html 代码

    <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent">
   <ul>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Dashboard</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Address Book</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Orders</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Downloadable Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Wishlist</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Newsletter Subscription</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Recently Viewed Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Save For Later Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Gift Cards</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Logout</button></li>
   </ul>
</div>

我试图用下面的sass隐藏第四个孩子

    .MyAccountTabList{
    &-ExpandableContentContent{
        ul{
            li.MyAccountTabListItem :nth-child(4){
                display: none !important;
            }
        }
    }
}

但它不起作用。我该如何解决？

Answer 1

只需删除类和:之间的空格

li.MyAccountTabListItem:nth-child(4){
   display: none !important;
}