0

区切り画像付きのメニューを作成しました。そのため、すべてのリスト項目が互いに分離して見えます。しかし問題は、最後の仕切りを削除する方法がわからなかったことです。li:last-child {background:none} で試しましたが、うまくいきません。現時点で使用しているコードは次のとおりです。

.top-menu {
    background: url(../images/bg_linkstop.jpg) repeat-x;
    border: #FFF 2px solid; 
    border-radius: 10px;
    margin: 10px 0;
    height: 52px;  
    list-style: none;

    li {
        float: left;
        height:48px;
        padding: 0 22px;
    background : url(../images/bg_divisor.png) no-repeat center right;

        }       
}

＆ここに結果があります：

ここに画像の説明を入力

最後のメニュー項目の右側に仕切りがあるため、見栄えがよくないことがわかります。その分割画像を削除したい。

4

3 に答える 3

0 
 li {
    float: left;
    height:48px;
    padding: 0 22px;
     background : url(../images/bg_divisor.png) no-repeat center left;
 }

最初のアイテムをターゲットにできるように、背景の位置を右から左に変更します (以下を参照)。

最初の子は IE8 をサポートしています

li:first-child {
  background: none;
}
于 2013-07-04T14:03:45.257 に答える
0

CSSの後に次のルールを追加してみてください。

.top-menu li:last-child {
    background :none;
}

これは、指定した css コードの後に​​必ず配置してください。これが機能しない理由はありません。（競合があると思われる場合は、追加してみてください!important）

これにより、最後に一致した の背景のみが削除されliます。

于 2013-07-04T13:11:55.557 に答える
0

セレクターを調べることができます:last-of-type。それは自明だと思います。このセレクターは以前の IE8 では機能しませんが、

このセレクターの詳細については、こちらを参照してください

于 2013-07-04T13:12:28.853 に答える