:第一个孩子适用于所有链接

时间:2014-07-17 作者:BHWD

我试图去掉左边的边距:10px;从我的主导航中的第一个菜单项。我正在为我的网站使用wordpress自定义导航。

我尝试了:first-child方法,但这似乎删除了所有链接的边距,而不仅仅是第一个链接。你知道还有其他方法可以做到这一点吗?以下是我的菜单的html:

<div class="menu-links">
    <div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu"><li id="menu-    item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4"><a href="http://hadston.immaculate.co.uk/">overview</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Strategy</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#">business</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">leadership</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">governance</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">csr</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-   item-11"><a href="#">sustainability</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">careers</a></li>
</ul></div>        </div>
    </div>
CSS:

ul.menu li,a {
text-decoration: none;
display: inline;
padding-bottom:5px;
margin-left: 10px;
}
ul#menu-menu-1 > li,a:first  {
margin-left: 0px;
}

2 个回复
最合适的回答,由SO网友:gdaniel 整理而成

您的代码:

ul#menu-menu-1 > li,a:first  {
margin-left: 0px;
}
您需要将第一个子元素应用于列表元素,而不是链接。您也不应该有逗号。逗号表示新选择。

尝试以下操作:

ul#menu-menu-1 > li:first-child a{
maegin-left:0px;
}
*第一个孩子在ie8及更早版本中不工作。

SO网友:tfrommen

正如已经指出的,这是一个CSS特有的问题。无论如何,有一种方法可以做到这一点:

/* Reset left margin for ALL items  */
ul.menu li {
    margin-left: 0;
}

/* Set it back for any item that\'s not the first one */
ul.menu li + li {
    margin-left: 10px;
}
根据您当前的CSS,您可能需要更改选择器(例如,为列表项使用特定的类名)。

结束

相关推荐

在编辑帖子页面中,如何使用jQuery修改状态选择列表?

这是我的JS:jQuery(\'#post_status option[value=\"draft\"]\').text(\'Approve\'); 我只是试图修改编辑帖子页面中状态选择表单元素中option元素内的文本。由于某种原因,它不起作用。我正在使用“admin\\u footer”操作添加JS。也许还有别的办法?我也试过:jQuery(\'#post_status option[value=\"changes-required\"]\').prop(\'selected\', true