Question

尝试设置菜单，以便我在每个菜单项上都有边框左边但是边框从第一个项目中排除。

网站：http://www.rogersinternational.com

CSS：

#access {
 background: #414731;
 display: block;
 float: left;
 margin: 0 auto;
 width: 900px;
 height: 42px;
 text-transform: uppercase;
}
#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 14px;
 width: 900px;
}
#access .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
}
#access .menu-header li,
div.menu li {
 float: left;
 position: relative;
}
#access a {
 color: #a5af86;
 line-height: 38px;
 padding: 0 16px;
 text-decoration: none;
 border-left: 1px solid #5e6549;
}
#access a:first-child { border: none }
#access ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 display: none;
 position: absolute;
 top: 38px;
 left: 0;
 float: left;
 width: 180px;
 z-index: 99999;
}
#access ul ul li { min-width: 180px }
#access ul ul ul {
 left: 100%;
 top: 0;
}
#access ul ul a {
 background: #414731;
 line-height: 1em;
 padding: 10px;
 width: 160px;
 height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
 background: #414731;
 color: #fff;
}

菜单：

<div class="menu">
    <ul>
        <li><a href="http://www.rogersinternational.com/">Home</a></li>
        <li><a href="http://www.rogersinternational.com/about">Company Profile</a></li>
        <li><a href="http://www.rogersinternational.com/products">Products</a></li>
        <li><a href="http://www.rogersinternational.com/solutions">Solutions</a></li>
        <li><a href="http://www.rogersinternational.com/photo-gallery">Photo Gallery</a></li>
        <li><a href="http://www.rogersinternational.com/technical-specs">Technical Specs</a></li>
        <li><a href="http://www.rogersinternational.com/contact">Contact</a></li>
    </ul>
</div>

我可以让它识别firebug中的伪类，但效果不会发生。感谢您的帮助。

Answer 1

.menu li:first-child a{
    border: none!important;
}

你会得到相同的结果：

#access .menu li:first-child a{
    border: none;
}

解释：

你的边界是在这里定义的：

#access a {
    border-left: 1px solid #5E6549;
    …
}

.menu li:first-child将无法匹配，因为此处未定义边框。

.menu li:first-child a不起作用，因为#access a具有更高的规格。

因此，您必须通过添加！important 规则

来增加指定性

Answer 2

您还可以在第一个li上输入ID：

<li id="first">

并像这样编辑你的风格：

#access #first a { border: none }

我在这里做了些改动： http://jsbin.com/oyafe3

Answer 3

将边框应用于所有元素。然后将其从第一个孩子中删除。

.menu li { border-left:1px solid black; }
.menu li:first-child { border-left:none; }

使用CSS伪类：first-child

3 个答案: