元素未使用 CSS 隐藏

Question

这是一个名为“主页”的 link，我试图使用 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?

Answer 1

如果您只想隐藏“HOME”，请将您的 CSS 选择器更改为以下代码段中的选择器：

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>

元素未使用 CSS 隐藏

Element not hiding using CSS

css

jquery

hide

display