35

がある場合、最後のアイテムを除くulすべてのアイテムにボーダーボトムを設定するにはどうすればよいliですか? borderまた、 180pxの幅を作ろうとしています。ここに私のコードがあります:

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

.sideNav {
    margin:0;
    padding:0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:216px;
    background-color:#017dc6;
}

.sideNav li {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    width:180px;
}

.sideNav li a {
    border-bottom:1px solid #80bee3;
    width:180px;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:18px;
}
4

4 に答える 4

28

を使用し:not(:last-child)ます。

.sideNav li:not(:last-child) a {
    /* your css here */
}
于 2013-10-12T01:32:22.087 に答える
2

1 つの方法: :last-childを使用して以下のようなルールを使用して、最後のものをオーバーライドできます(css3 にタグを付けたため):

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

デモ

IE8 で使用できるポリフィルがありますが、最後のものにクラス名を指定し、それにルールを適用してスタイルをリセットできる場合は、css3 を使用するよりも適切にサポートされます (古いブラウザーもサポートすることが意図されている場合)。

jquery のようなスクリプト言語を使用している場合は、jquery がブラウザー間の互換性を処理するため、最後の子にクラスを簡単に追加できます。

于 2013-10-12T01:26:08.993 に答える