Question

如何隐藏列表中的“讨论”项目？

<div id="psp-primary-header" class="psp-grid-row cf">
<nav class="nav psp-masthead-nav" id="psp-main-nav">
    <ul>
        <li id="nav-menu"><a href="#" class="">Menu</a>
            <ul>
                <li id="nav-milestones"><a href="#psp-phases" class="">Phases</a> </li>
                <li id="nav-talk"><a href="#psp-discussion" class="">Discussion</a> </li>
                <li id="nav-logout"><a href="https://www.google.com">Logout</a> </li>
            </ul>
        </li>
    </ul>
</nav>

我尝试了这个，但没有奏效：

#nav-talk {display:none !important};

Answer 1

您可能遇到specificity问题。

尝试

#psp-primary-header > #psp-main-nav > #nav-talk {display:none;}

然后一次删除一个父ID，以找出特异性冲突的位置。

例如，如果您还有：

.nav #nav-menu li {display:inline-block !important;}

这将适用于：

#nav-talk {display:none !important;}

#nav-talk display:inline-block

查看Id与More Specific

之间的区别

Answer 2

如果外部CSS不起作用，正如您在问题中所述，您可以将其写入该行的HTLM中：

<li id="nav-talk" style="display:none;"><a href="#psp-discussion" class="">Discussion</a> </li>

如何使用CSS隐藏此列表项

2 个答案: