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

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

html css

Html 如何仅使用CSS隐藏菜单元素,html,css,hide,display,Html,Css,Hide,Display,我试图隐藏这些菜单元素，但我似乎不能只选择中间名为“联系人”的选项。我不能直接编辑html，所以我使用CSS覆盖样式本质上，我只想隐藏名为“Contact”的项目，使其不会出现。如何使用CSS选择它？我已经把我认为可能有用的东西放在了这一部分，但它并没有真正起作用。任何帮助都将不胜感激。提前谢谢。（也在这里：）以下是菜单代码： <!DOCTYPE html> <html> <head> <style> .

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

本质上，我只想隐藏名为“Contact”的项目，使其不会出现。如何使用CSS选择它？我已经把我认为可能有用的东西放在了这一部分，但它并没有真正起作用。任何帮助都将不胜感激。提前谢谢。（也在这里：）

以下是菜单代码：

    <!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>


.nav a[标题：联系人]{
显示：无；
}

您只需将

：

替换为

，因为css选择器就是这样工作的（参考）

您的代码应该如下所示

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


.nav a[标题=联系人]{
显示：无；
}

在这里，它可以工作：

试试这个：

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

请查看小提琴：

您可以通过以下方式使用CSS

第n个子项

选择器：

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

或者可以为“联系人”列表项提供CSS类，并使用CSS隐藏它：

HTML

.nav li:第n个孩子（2）{
显示：无；
}
.隐藏{
显示：无；
}

带有CSS第n个子选择器





使用CSS类

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

方法1-通过第n个子选择器属性以li为目标

方法2-您还可以使用title属性将li作为目标

非常感谢！工作完美，这就是我喜欢stack社区的原因：谢谢你，太棒了！这是我最喜欢的第n个孩子的想法（2）。非常感谢：）

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

<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>

.hide {
  display: none;
}

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

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