使用CSS伪类：first-child

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; }

Answer 4

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