我一直在多次閱讀本網站。這對於很多事情總是很有幫助的。所以謝謝你們！用於WP中最後一個菜單項的CSS代碼

我遇到了一個我無法解決的問題。我一直在通過stackoverflow（真的）深入研究其他帖子，但即使當我得到它的信息清晰明瞭，解決方案似乎很簡單，我也無法得到這個工作，對不起。

基本上我有一個Wordpress網站，我用Main Menu導航欄創建。通過使用<?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; 
}

謝謝傢伙，我真的很感謝你的幫助:)

來源

2012-11-15 Ivan Gzpl

使用'li：last-child'。它只適用於現代瀏覽器。你可以使用像selectivizr的IE瀏覽器或手動添加一個類使用JavaScript。 – powerbuoy

你有沒有嘗試那要得到最後一個項目？

#cssmenu ul li:last-child {}

來源

2012-11-15 13:27:50

是的！有用！非常感謝你Foxbot，真的:) 我的編碼知識是安靜的基本，還有很多事情要學習。 –

-1

我想你將不得不添加此規則

#cssmenu > ul > li > a:last-of-type:after {border: none}

來源

2012-11-15 13:29:38 Neograph734

這將設計出每一個最後一個類型的「a」。換句話說，菜單中的每個「a」。 – powerbuoy

您可以使用

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

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

的「最後的型」如果你有「子項目」或「子菜單」（012），那就很好），因爲它反正會起作用，但它與瀏覽器不兼容......你也可以用多個「最後孩子」規則指出......

檢查你的CSS特異性。有時候你可能需要使用更高的特異性才能得到你想要的。

來源

2012-11-15 13:31:53 rafaelbiten

謝謝！這很有幫助..乾杯！ –

您應該使用「+」選擇器，它來自CSS 2.0，功能非常強大，即使對於IE 7也是如此。

cssmenu UL李{邊界：無}

cssmenu UL李李+ {左邊框：1px的固體#colorcode;}

這將使每一個「李」對左邊的垂直線（而不是第一個）。

來源

2015-02-05 10:34:47 anupkmaharjan

用於WP中最後一個菜單項的CSS代碼

回答

cssmenu UL李{邊界：無}

cssmenu UL李李+ {左邊框：1px的固體#colorcode;}

相關問題