3

しばらくの間、このサイトを何度も読んでいます。いつも色々とお世話になっています。ありがとうございます！

解決できない問題があります。ここでスタックオーバーフローの他の投稿を詳しく調べてきましたが（本当に）、得た情報が静かで明確であり、解決策が簡単に見えたとしても、これを機能させることができません。申し訳ありません。

基本的に、メイン メニュー ナビゲーション バーを使用して作成している Wordpress サイトがあります。要素は<?php wp_list_pages('title_li='); ?>CSS を使用して表示され、要素間の垂直方向の仕切りを表示するためにすべての要素のスタイルを設定しました。

問題は、最後のアイテムを他のアイテムとは異なるものにすることができないことです (最後のアイテムなので、垂直の仕切りを表示したくありません) あなたの親切なアドバイスに従って多くのオプションを試しましたが、うまくいきませんでしたそのため、失敗したすべての試行からコードを削除しました。

どんな助けでも大歓迎です。

これが私のコードです：

<div id="cssmenu">
            <ul class="nav" id="primary-nav">
                <?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
                <li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">WELCOME</a></li>
                <?php wp_list_pages('title_li='); ?>
            </ul>
            </div>

また、CSS は次の場所にあります。

    #cssmenu {
    height:37px;
    display:block;
    padding:0;
    margin:0 auto; 
    border: 1px solid #444758;
    border-bottom: 1px solid #bbbdc5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.14), inset 0 -1px 0 #343746;
}

#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:9px 37px; font-size: 15px; letter-spacing: 0; text-align:center; text-decoration:none; text-shadow:0 -1px 0 #000 !important; text-transform: uppercase; }
#cssmenu > ul > li.last-item > a{ padding-right:34px; }
#cssmenu > ul > li:first-child > a{border-radius:4px 0 0 4px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:0; bottom:0; right:-2px; z-index:99; }
#cssmenu > ul > li.last-item > a:after{ border:none; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:4px solid transparent; border-top:4px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 4px 4px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu, #cssmenu > ul > li > ul > li a:hover {
    background: #3e4151;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#838796), to(#3e4151));
    background-image: -moz-linear-gradient(top, #838796, #3e4151);
    background-image: -ms-linear-gradient(top, #838796, #3e4151);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #838796), color-stop(100%, #3e4151));
    background-image: -webkit-linear-gradient(top, #838796, #3e4151);
    background-image: -o-linear-gradient(top, #838796, #3e4151);
    background-image: linear-gradient(top, #838796, #3e4151);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#838796', endColorstr='#3e4151',GradientType=0 );
}

#cssmenu{border-color:#353749;} 
#cssmenu > ul > li > a{border-right:1px solid #4e5262; color:#fff !important;}
#cssmenu > ul > li > a.last-item{border:none;}
#cssmenu > ul > li > a:after{border-color:#a6a9b4;} 
#cssmenu > ul > li > a:hover {
    background: #2666c3;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#1c356b), to(#2666c3));
    background-image: -moz-linear-gradient(top, #1c356b, #2666c3);
    background-image: -ms-linear-gradient(top, #1c356b, #2666c3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c356b), color-stop(100%, #2666c3));
    background-image: -webkit-linear-gradient(top, #1c356b, #2666c3);
    background-image: -o-linear-gradient(top, #1c356b, #2666c3);
    background-image: linear-gradient(top, #1c356b, #2666c3);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c356b', endColorstr='#2666c3',GradientType=0 );
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.14), inset 0 -1px 0 #343746;
}

#cssmenu ul li .current_page_item a,#cssmenu ul li .current_page_item a:hover{
    background: #2666c3;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#2666c3), to(#1c356b));
    background-image: -moz-linear-gradient(top, #2666c3, #1c356b);
    background-image: -ms-linear-gradient(top, #2666c3, #1c356b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2666c3), color-stop(100%, #1c356b));
    background-image: -webkit-linear-gradient(top, #2666c3, #1c356b);
    background-image: -o-linear-gradient(top, #2666c3, #1c356b);
    background-image: linear-gradient(top, #2666c3, #1c356b);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2666c3', endColorstr='#1c356b',GradientType=0 );
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.14), inset 0 -1px 0 #343746;
}

#cssmenu ul li.current_page_item a{
    background: #2666c3;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#2666c3), to(#1c356b));
    background-image: -moz-linear-gradient(top, #2666c3, #1c356b);
    background-image: -ms-linear-gradient(top, #2666c3, #1c356b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2666c3), color-stop(100%, #1c356b));
    background-image: -webkit-linear-gradient(top, #2666c3, #1c356b);
    background-image: -o-linear-gradient(top, #2666c3, #1c356b);
    background-image: linear-gradient(top, #2666c3, #1c356b);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2666c3', endColorstr='#1c356b',GradientType=0 );
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 20px 20px rgba(255, 255, 255, 0.12), 0 1px 1px #9c9c9c, inset 0 -1px 0 #343746;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.14), inset 0 -1px 0 #343746;
}

みんなありがとう、助けてくれて本当にありがとう:)

4

4 に答える 4

6

最後のアイテムを取得するためにそれを試みましたか?

#cssmenu ul li:last-child {}
于 2012-11-15T13:27:50.880 に答える
0

どちらでも使用できます

#cssmenu ul li:last-child { border: none; }

また

#css menu ul li:last-of-type { border: none; }

<ul><ul><li>とにかく動作するので、「サブアイテム」または「サブメニュー」（）がある場合、「最後のタイプ」は良いですが、ブラウザとの互換性は低くなります...複数の「最後の子」でそれを指すこともできますルール....

CSS の仕様も確認してください。必要なものを得るために、より高い特異性を使用する必要がある場合があります。

于 2012-11-15T13:31:53.763 に答える
0

「+」セレクターを使用する必要があります。これは CSS 2.0 のものであり、IE 7 でも非常に強力です。

cssmenu ul li{border:none}

cssmenu ul li+li{border-left:1px solid #colorcode;}

これにより、最初のものを除いて、すべての「li」の左側に（代わりに右側の線を使用して）垂直線が表示されます。

于 2015-02-05T10:34:47.093 に答える
-1

このルールを追加する必要があると思います

#cssmenu > ul > li > a:last-of-type:after {border: none}
于 2012-11-15T13:29:38.620 に答える