需要隱藏一個列表元素

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