1

我正在尝试使最后一个类别没有底部边框，是否有任何技巧可以在没有编程的情况下完成它？

HTML 和 CSS：

<style>
#menu {
  border:1px red solid;padding:10px
}
#menu a {
  display:block;
  border-bottom:1px #000 dotted
}
</style>
<div id="menu">
  <p>MAIN MENU</p>
  <a>Computers</a>
  <a>Design</a>
  <a>Programming</a>
</div>

示例：http: //jsfiddle.net/GLJWp/

4

3 回答 3

3

看看:last-child伪类，它只会将 css 规则应用于最后一项：http ://www.quirksmode.org/css/firstchild.html

在这种情况下，您可以通过以下方式设置最后一个链接的样式：

#menu a:last-child {border-bottom:none}

为了支持 IE <9，看看这个漂亮可怕的条件样式表黑客。

于 2012-10-08T20:19:53.573 回答
3

你可以试试这个，因为last-child不起作用IE

HTML

<div id="menu">
    <p>MAIN MENU</p>
    <a>Computers</a>
    <a>Design</a>
    <a>Programming</a>
</div>​

CSS

#menu{
    border:1px red solid;padding:10px
}
#menu a{
    display:block;
    border-top:1px #000 dotted
}

以下将影响a之后的第一个p，a:first-child在 IE 中不起作用，因为p它是第一个子元素

#menu p + a{
    border-top: none;
}

演示。

于 2012-10-08T21:14:45.367 回答
1

在这里完成：http: //jsfiddle.net/GLJWp/2/

于 2012-10-08T20:23:07.780 回答