元素不使用 CSS 隐藏答案

【问题标题】：Element not hiding using CSS元素不使用 CSS 隐藏
【发布时间】：2020-11-30 06:36:31
【问题描述】：

这是一个名为“主页”的链接，我试图使用 CSS 隐藏它，但它不起作用。

a.menu-item.shortpoint-nav-home-link {
  display: none !important
}

<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode shortpoint-nav-home-link shortpoint-nav-a-selected" accesskey="1" href="/sites/somesite/en/Pages/default.aspx">
  <span class="additional-background ms-navedit-flyoutArrow">
    <span class="menu-item-text" data-original-word="English">Home</span>
    <span class="ms-hidden">Currently selected</span>
  </span>
</a>

还有什么方法可以隐藏吗？或者可能正在使用 JS/Jquery？

【问题讨论】：

您的 CSS 单独工作正常，正如您在我为您的问题编辑的 sn-p 中看到的那样。如果它在您的测试环境中不起作用，那么肯定存在另一个潜在问题 - 例如，CSS 选择器不够具体，无法覆盖另一个样式规则。检查 devtools 中的元素以确定显示该元素的类。不幸的是，没有看到更多相关代码，我们真的无能为力。
通过故障排除方法，在 Chrome 开发工具中：检查元素并右键单击 -> 复制选择器。如果它与 a.menu-item.shortpoint-nav-home-link 不同，则在您的 css 中使用该选择器
问题在于 SharePoint，它添加了数百甚至数千个可能导致问题的额外 CSS/JS 代码。
对，但是如果您使用 devtools，您可以看到导致问题的特定工具。然后你就知道要覆盖什么了。

标签： jquery css hide display

【解决方案1】：

如果您想仅隐藏“HOME”，请将您的 CSS 选择器更改为以下 sn-p 中的选择器：

a.menu-item .menu-item-text {
  display: none;
}

<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode shortpoint-nav-home-link shortpoint-nav-a-selected" accesskey="1" href="/sites/somesite/en/Pages/default.aspx">
  <span class="additional-background ms-navedit-flyoutArrow">
    <span class="menu-item-text" data-original-word="English">Home</span>
  <span class="ms-hidden">Currently selected</span>
  </span>
</a>

【讨论】：