用 CSS 隐藏第一个 li 不起作用答案

【问题标题】：Hide first li with CSS is not working用 CSS 隐藏第一个 li 不起作用
【发布时间】：2018-12-11 19:16:45
【问题描述】：

我正在使用 WordPress 主题，我想隐藏第一个 li 但它不起作用，现在它隐藏了所有 li

这是我的 HTML 代码

<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>Test</h4></a>
</li>
<li>
<a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>Seminars</h4></a>
</li>
<li><a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>One to one meetings</h4></a>
</li>
</li>
</ul>
</div>

我的 CSS 代码

 .nav li:first-child { visibility: hidden; }

【问题讨论】：

工作得很好，jsfiddle.net/5rkgbt2a 你可能不知道可见性（隐藏仍然保留元素需要的空间）和display:none 之间的区别......？

标签： css wordpress css-selectors

【解决方案1】：

试试display:none;

在这里查看visibility:hidden 和display:none 之间的区别：What is the difference between visibility:hidden and display:none?

.nav li:first-child { display:none; }

<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>Test</h4></a>
</li>
<li>
<a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>Seminars</h4></a>
</li>
<li><a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>One to one meetings</h4></a>
</li>
</li>
</ul>
</div>

【讨论】：

它仍然隐藏所有标签
你用什么浏览器？？
我在 iPhone 版本中检查这个
你可以将类添加到第一个 li 并在 css 中隐藏它

【解决方案2】：

试试这个代码

.nav ul li:first-of-type{
    display: none;
}

<div class="nav">
    <ul class="nav-tabs nav-justified">
        <li class="active">
            <a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>
                    Test
                </h4>
            </a>
        </li>
        <li>
            <a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>
                    Seminars
                </h4>
            </a>
        </li>
        <li>
            <a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>
                    One to one meetings
                </h4>
            </a>
        </li>
    </ul>
</div>

【讨论】：

谢谢它隐藏了所有的 li，我在我的 wordpress 自定义 css 中写了这个 css