Question

我有这段代码：

<ul class="nav nav-tabs nav-freetime">

            <li class="active">
                <a class="btn-nav-tab" href="#mod2" data-toggle="tab">Bar El Gordo</a>
            </li>

            <li>
                <a class="btn-nav-tab" href="#mod3" data-toggle="tab">'La Tabernilla'</a>
            </li>
            <li>
                <a class="btn-nav-tab" href="#mod4" data-toggle="tab">Restaurante La Muralla</a>
            </li>

我尝试使用

.nav .btn-nav-tab{ display: none; }

但它隐藏了一切，我希望它只隐藏mod1。我试着

a[href="#mod1"]{ display: none; }

但没有工作

Answer 1

在此示例中，您可以使用re.findall（MDN documentation）或nth-child（MDN documentation）

last-child

或

.nav li:last-child {display: none}

Answer 2

你应该使用id而不是href属性来做你想做的事情，因为它更准确，适用于任何版本的CSS和任何浏览器。

您更新的HTML

<ul class="nav nav-tabs nav-freetime">

<li class="active">
    <a id="mod2" class="btn-nav-tab" href="#mod2" data-toggle="tab">Bar El Gordo</a>
</li>

<li>
    <a id="mod3" class="btn-nav-tab" href="#mod3" data-toggle="tab">'La Tabernilla'</a>
</li>
<li>
    <a id="mod4" class="btn-nav-tab" href="#mod4" data-toggle="tab">Restaurante La Muralla</a>
</li>

您更新的css

#mod3 { display: block; } // can replace with any mod id

.nav .btn-nav-tab{ display: none; }

你可以将＃mod3替换为任何id，只要它在你的html中。

CSS显示：无; HREF

2 个答案: