html - 最後のカテゴリを境界なしにします

Question

最後のカテゴリに下の境界線がないようにしようとしていますが、プログラミングなしでそれを行うためのトリックはありますか？

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/

Answer 1

:last-child最後のアイテムにのみcssルールを適用する疑似クラスを見てください： http ：//www.quirksmode.org/css/firstchild.html

この場合、最後のリンクを次のようにスタイル設定します。

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

IE <9をサポートするために、この美しく恐ろしい条件付きスタイルシートハックを見てください。

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
}

以下は、最初の子要素であるため、IEでは機能aしません。pa:first-childp

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

デモ。

Answer 3

ここで実行: http://jsfiddle.net/GLJWp/2/