我已经多次阅读这个网站很多次了。很多事情总是很有帮助。谢谢你们!
我遇到了一个无法解决的问题。我一直在深入查看stackoverflow中的其他帖子(真的),但即使我得到的信息很安静,解决方案似乎很简单,我也无法使用,抱歉。
基本上我有一个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;
}
谢谢伙计们,我真的很感谢你的帮助:)。
答案 0 :(得分:5)
你有没有尝试过最后一项?
#cssmenu ul li:last-child {}
答案 1 :(得分:0)
您可以使用
#cssmenu ul li:last-child { border: none; }
OR
#css menu ul li:last-of-type { border: none; }
如果你有“子项目”或“子菜单”(<ul><ul><li>
),那么“最后的类型”是好的,因为它无论如何都会起作用,但它与浏览器的兼容性较差......你也可以指出有多个“最后孩子”规则......
检查你的CSS特异性。有时你可能需要使用更高的特异性来获得你想要的东西。
答案 2 :(得分:0)
你应该使用“+”选择器,它来自CSS 2.0,非常强大,即使对于IE 7也是如此。
这将使每个“li”在左侧具有垂直线(而不是使用右侧的线),除了第一个。
答案 3 :(得分:-1)
我猜您必须添加此规则
#cssmenu > ul > li > a:last-of-type:after {border: none}