需要隐藏一个列表元素

Question

我只在底层平台上自定义CSS（所以我无法编辑HTML）。我需要隐藏列表中的一个项目，如下所示：

<li><a href="#" data-part="menu-link" data-page="earn"><span class="icon icon-star"></span>Earn points</a></li>

如何在不阻止整个列表的情况下使用CSS实现此目的？

Answer 1

如果您知道列表项位置，并且它已在父列表中固定（它始终是第1个或第2个等等），则可以使用nth-child。因此，如果该项目在列表中排名第三，您可以执行以下操作：

ul li:nth-child(3) {
  display: none;
}

但是，您仍然需要限定父ul;否则，这将影响页面上的所有列表元素。

如果不是这种情况，则可能必须使用JavaScript。如果data-page="earn"对于包含的元素是唯一的，那么如果你有jQuery，你可以做这样的事情。否则，您可以使用querySelector：

$('a[data-page="earn"]').parent('li').remove();