在 css 打电话给李

Question

我正在使用 ul 使用此字段集在网站上工作。这是一个 joomla 模板，我以发布者身份登录。这是您可以更改文章的菜单。

我希望第一个 a 和最后两个 a 不可见。（比如 display:none）。但是我不知道如何调用 css 中的行。我知道 :nth-child() 存在，但它没有像我尝试的那样工作。

<fieldset>
<ul class="nav nav-tabs">
::before
<li class>
<a href="#editor" data-toggle="tab">Content</a>
</li>
<li class="active">
<a href="#publishing" data-toggle="tab">Publishing</a>
</li>
<li class>
<a href="#language" data-toggle="tab">Language</a>
</li>
<li class>
<a href="#metadata" data-toggle="tab">Metadata</a>
</li>
::after
</ul>

有谁知道css中怎么称呼他们吗？如果这个问题不是真正的专家级别，我很抱歉。谢谢

Answer 1

隐藏所有并显示活动的。

.nav-tabs li {display: none;}
.nav-tabs li.active {display: list-item} /* or block, if LIs are floated or you want them block */

Answer 2

你可以用简单的方法做到这一点 CSS

.nav li:first-child,
.nav li:nth-child(3),
.nav li:nth-child(4) {
    display: none;
}

但这不是一个干净的方法。应该通过覆盖重新设计编辑表单。如果您没有这样做的权限，请询问模板开发人员。

Answer 3

将相同的 class 放入您要隐藏的 li 中，然后在您的 css 上调用它们。

示例：

<li class="hide-me"></li>

li.hide-me { display: none;}

顺便说一句，如果您打算稍后更改显示值以单独显示它们，id 建议您使用 id 而不是 class。

在 css 打电话给李

Calling li's in css

html

css

joomla

html-lists