如何仅使用 CSS 隐藏菜单元素

Question

我试图隐藏这些菜单元素，但我似乎不能只 select 中间选项 'Contact'。我无法直接编辑 html，所以我使用 CSS 来覆盖样式。

基本上我只是想隐藏名为 'Contact' 的项目不出现。我如何使用 CSS select 它？我已经把我认为可能有用的东西放在了这个部分，但它并没有真正起作用。任何帮助将不胜感激。提前致谢。（这里也是：https://jsfiddle.net/amhzv0Lw/4/）

菜单代码如下：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .nav a[title:contact] {
        display: none;
    } 
    </style>
    </head>
    <body>

    <ul class="nav navbar-nav navbar-left">
<li><a href="/www.example.com/" title="Home">Home</a></li>
<li><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
<li><a href="https://www.example.com/login" title="Login">Login</a></li>



    </ul>

    </body>
    </html>

Answer 1

您只需将 : 替换为 =，因为这就是 css 选择器的工作方式（参考 here）

您的代码应如下所示

<style>
    .nav a[title=Contact] {
        display: none;
    } 
</style>

Answer 2

这里有效：See this fiddle

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

Answer 3

试试这个：

.nav>li:nth-child(2){
   display:none;
}

请查看 fiddle : https://jsfiddle.net/amhzv0Lw/9/

Answer 4

您可以这样使用 CSS nth-child 选择器：

.nav li:nth-child(2) {
  display: none;
}

或者可以为 "Contact" 列表项提供 CSS class，并使用 CSS:

隐藏它

HTML

<ul class="nav navbar-nav navbar-left">
  <li><a href="://www.example.com/" title="Home">Home</a></li>
  <li class="hide"><a href="://www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

CSS

.hide {
  display: none;
}

.nav li:nth-child(2) {
  display: none;
}

.hide {
  display: none;
}

<h3>With CSS nth-child selector</h3>

<ul class="nav navbar-nav navbar-left">
  <li><a href="/www.example.com/" title="Home">Home</a></li>
  <li><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

<h3>With CSS classes</h3>

<ul class="nav navbar-nav navbar-left">
  <li><a href="/www.example.com/" title="Home">Home</a></li>
  <li class="hide"><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

编辑：注意下面的CSS只会隐藏超链接，而不是列表项：

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

干杯！

Answer 5

有两种方法可以做到这一点-

Method 1- Targetting the li through nth-child selector property.

.nav li:nth-child(2) {
    display: none;
}

Method 2- You can also target the li with title attribute.

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

如何仅使用 CSS 隐藏菜单元素

How to hide menu element with only CSS

html

css

hide

display

HTML

CSS