如何使用 css 定位和隐藏标题

Question

我正在尝试定位一个标题，它也是 a title。我想隐藏的词是来自以下html的contact。似乎没有其他方法，因为即使 ID 也链接到主菜单，所以通过 ID 隐藏它会隐藏整个菜单。

<div class="collapse navbar-collapse navbar-ex1-collapse">

  <ul id="menu" class="menu">
    <li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
      <a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
      <ul role="menu" class="dropdown-menu"></ul>
    </li>
  </ul>
  
</div>

也许我解释得不好。如果您查看手机左上角here，通过切换汉堡图标下拉下拉菜单，您将看到三个字母act, 单词结尾contact 如何摆脱它？在桌面上，整个单词出现在徽标下方。这是一个带有子项的项目，我尝试使用更高层的选择器并将它们应用于 ID，例如 ul li，但这不起作用。隐藏 ID 将隐藏父项和子项，当我需要将其与其子项分开并单独隐藏时。

Answer 1

首先，您需要定位a 元素，该元素具有title 或Contact。在 CSS 中，这可以通过以下选择器来完成：

a[title="Contact"]

然后，您需要隐藏元素。有两种选择：

display: none;

visibility: hidden;

这是一个代码 sn-p，它演示了这两种方法中的第一种（使用 display 属性）：

a[title="Contact"] {
  display: none;
}

<div class="collapse navbar-collapse navbar-ex1-collapse">

  <ul id="menu" class="menu">
    <li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
      <a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
      <ul role="menu" class="dropdown-menu"></ul>
    </li>
  </ul>
  
</div>

项目符号点仍然存在，因此您可以看到只有文本 Contact 被隐藏，而不是 li 元素。 CSS 仅针对具有该特定标题的一个元素。

Answer 2

有一些巧妙的方法可以使用 CSS 隐藏文本，尽管这不是最理想的方法。 This approach 使用文本缩进的巧妙组合来达到最终结果。您可以使用属性选择器来定位标题属性为“Contact”的任何<a> 标签：

a[title='Contact'] {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

正如this post 中所引用的，它也可以提供更多的想法。值得注意的是：

a[title='Contact'] { color: transparent; }

Answer 3

好的，我检查了，您所说的“联系人”在 span 标签下，并且位于不同的基础级别，所以 Imma 从概念上回答您的问题：

因此，为了从该下拉菜单中隐藏该联系人，您所要做的就是将该元素的颜色更改为背景颜色，使其不可见，并使用无悬停效果来阻止链接工作并从中删除链接CSS当然使用媒体查询，这样它在从其他设备而不是移动设备浏览时不会影响这里是如何做到的

link.href = '';

将其留空，一切就绪，它不会再向您显示该链接，或者在使用移动设备时无法点击

现在根据您的问题： 由于在移动视图中没有边距，您看到的是“act”而不是“contact”，因此请先修复边距，然后如果您可以访问大型机代码， 使用我上面说的方法，我保证会奏效