WP 中最后一个菜单项的 CSS

Posted 2023-03-06

【中文标题】WP 中最后一个菜单项的 CSS

【英文标题】：CSS for Last Menu Item in WP

【发布时间】：2012-11-04 02:28:15

【问题描述】：

我已经阅读这个网站很多次了。它对很多事情总是很有帮助的。所以谢谢你们！

我遇到了无法解决的问题。我一直在深入研究 *** 中的其他帖子（真的），但即使我得到的信息很清楚而且解决方案看起来很简单，我无法让它工作，抱歉。

基本上我有一个我正在使用主菜单导航栏创建的 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 > aborder-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:aftertop: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:beforetop: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 > divdisplay:block; 
#cssmenu ul li.has-sub > a:hoverbackground:#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 > ulwidth:200px; 
#cssmenu ul li > ul lidisplay: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 );


#cssmenuborder-color:#353749; 
#cssmenu > ul > li > aborder-right:1px solid #4e5262; color:#fff !important;
#cssmenu > ul > li > a.last-itemborder:none;
#cssmenu > ul > li > a:afterborder-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;

谢谢伙计们，非常感谢你们的帮助:)

【问题讨论】：

使用li:last-child。它仅适用于现代浏览器。您可以使用类似 IE 的 selectivizr 或使用 javascript 手动添加类。

【参考方案1】：

您是否尝试过获得最后一项？

#cssmenu ul li:last-child 

【讨论】：

是的！有用！非常感谢 Foxbot，真的 :) 我的编码知识很基础，还有很多东西要学。

【参考方案2】：

你可以使用任何一个

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

或

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

如果你有“子项目”或“子菜单”（<ul><ul><li>），“最后一个类型”很好，因为它无论如何都可以工作，但它与浏览器的兼容性较差......你也可以用多个“最后一个孩子”规则....

还要检查您的 CSS 特异性。有时您可能需要使用更高的特异性来获得您想要的。

【参考方案3】：

你应该使用“+”选择器，它来自 CSS 2.0 并且非常强大，即使对于 IE 7 也是如此。

cssmenu ul liborder:none

cssmenu ul li+liborder-left:1px solid #colorcode;

这将使每个“li”在左侧都有垂直线（而不是在右侧使用线），除了第一个。

【参考方案4】：

我猜你必须添加这条规则

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

【讨论】：

这将为每个a 设置样式，这是它的最后一个类型。换句话说，菜单中的每个a。