Question

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

HTML＆amp; 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/

Answer 1

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

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

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

要支持IE＆lt; 9，请查看this beautifully horrible conditional stylesheet hack。

Answer 2

您可以尝试这样做，因为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在IE中工作后的第一个a:first-child，因为p是第一个子元素

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

DEMO

Answer 3

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

使最后一个类别无法使用

3 个答案: