使用css隐藏href

Question

我有一个我需要隐藏的菜单项。浏览所有文件并将其删除是不合逻辑的，因此我一直在寻找一种用CSS隐藏它的方法。这是我的代码：

<li>
    <a tabindex="-1" href="index.php?option=com_eshop&view=countries">
        <span class="icon-flag"></span>
         Countries
    </a>
</li>

我找到了一些可能的解决方案，但似乎没有任何效果。这是应该工作但我必须做错事的那个：

a[href="index.php?option=com_eshop&view=countries"]{ display:none; }

Answer 1

根据您提供的HTML，该属性选择器应工作。请参阅this example。

有几个原因导致它无法正常工作。这有两种可能性：

• 选择器被另一个带有higher specificity的选择器覆盖。如果是这种情况，您可以通过将父元素选择器添加到选择器来增加选择器的特异性。由于它是一个下拉菜单，因此可能会有更具体的选择器设置，例如display: block。

• 也可能不是您网站上的href值。如果是这种情况，您可以尝试使用属性选择器[attr*=value]。这将选择包含该值字符串实例的所有元素。

  a[href*="index.php?option=com_eshop&view=countries"] {
      display:none;
  }
  

Answer 2

使用nth-child（项目编号）css属性并隐藏它，因为你也想要隐藏li，因为如果你只隐藏链接那么由于li可能会有空格