使用 CSS 伪类 :first-child答案

【问题标题】：using CSS psuedo-class :first-child使用 CSS 伪类 :first-child
【发布时间】：2011-02-05 03:00:41
【问题描述】：

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

网站：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>

我可以让它识别萤火虫中的伪类，但效果没有发生。感谢您的帮助。

【问题讨论】：

我没有看到你的:first-child 风格？
不担心 x 浏览器的兼容性？
@BoltClock #access a:first-child

标签： html css menu css-selectors

【解决方案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 规则来增加特异性

【讨论】：

我认为在这种情况下不是。
这是必要的。请参阅上面的更新。不重要：jsfiddle.net/3hBeE 重要：jsfiddle.net/3hBeE/1
重新编辑：:first-child 伪类已经增加了特异性。您只需要使用#access ID 而不是.menu 类来限定它以匹配#access a。

【解决方案2】：

你也可以在你的第一个 li 上加上一个 id：

<li id="first">

然后像这样编辑你的风格：

#access #first a { border: none }

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

【讨论】：

谢谢@rquinn，好主意，不知道为什么这不是我的第一个方法。
因为那样的话，CSS3当然不会全是美妙的。 :D
@Jared Farrish：:first-child 在 CSS3 中并不新鲜。几乎唯一不支持它的浏览器是 IE
另外，如果您希望它是跨浏览器的，请对其进行分类。
@Jared Farrish 有时我倾向于追求幻想而忘记实际；）

【解决方案3】：

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

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

【讨论】：