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

我有这些菜单元素，我试图隐藏，但我似乎不能只选择名为"联系人"的中间选项。我无法直接编辑 html，因此使用 CSS 覆盖样式。

从本质上讲，我只想隐藏名为"联系人"的项目。如何使用 CSS 选择它？我已经把我认为可能有用的东西放在了这个部分，但它并没有真正起作用。任何帮助将不胜感激。提前谢谢。(这里也是：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>

你只需要用=替换:，因为这就是 css 选择器的工作方式(参考这里(

您的代码应如下所示

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

你可以

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

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

或者可以为该"联系人"列表项提供一个CSS类，并使用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;
}

干杯！

在这里，它有效：看到这个小提琴

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

试试这个：

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

请查看小提琴：https://jsfiddle.net/amhzv0Lw/9/

有两种

方法可以做到这一点-

方法 1- 通过第 n 个子选择器属性定位 li。

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

方法2-您还可以使用标题属性定位li。

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

.HTML

.CSS

相关内容

最新更新

热门标签：