logo标签列表

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

htmlcsshidedisplay
3
我有一些菜单元素，我想隐藏其中的一个叫做“联系人”的选项，但似乎无法只选择它。我无法直接编辑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>
5个回答
4

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

你的代码应该像这样：

<style>
    .nav a[title=Contact] {
        display: none;
    } 
</style>
2
您可以这样使用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;
}

干杯！

这是最好的，我喜欢nth-child（2）的想法。非常感谢 :) - pedrum
1
非常感谢！非常完美，这就是我喜欢的堆栈社区的原因:D - Andy
0
0

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

方法1- 通过nth-child选择器属性针对li进行操作。

.nav li:nth-child(2) {
    display: none;
}
方法二- 您还可以针对具有标题属性的li进行定位。
.nav a[title=Contact] {
        display: none;
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接