对除最后一个元素以外的所有元素都应用border-right

Question

我的Wordpress页面如下所示： 第2页 第3页

我不需要第3页的边框。如何删除它？

 .primary-navigation { float: left; } .primary-navigation a { margin-top: 16px; margin-bottom: 12px; padding-left: 23px; padding-right: 23px; border-right: 1px dotted #7b7f82; position: relative; line-height: 1; } .primary-navigation .menu-item-has-children a { padding-right: 35px } 

 <div id="primary-navigation" class="primary-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <nav id="navigation" class="navigation clearfix mobile-menu-wrapper"> <a href="#" id="pull" class="toggle-mobile-menu"> <?php _e( 'Menu'); ?> </a> <?php if (has_nav_menu( 'primary-menu')) { ?> <?php wp_nav_menu(array( 'theme_location'=>'primary-menu', 'menu_class' => 'menu clearfix', 'menu_id' => 'menu-primary-menu', 'container' => '', 'walker' => new mts_menu_walker)); ?> <?php } else { ?> <ul class="menu clearfix" id="menu-primary-menu"> <?php wp_list_pages( 'title_li='); ?> </ul> <?php } ?> </nav> </div> 

Answer 1

使用:last-child伪类设置border-right: none; 在.primary-navigation的最后一个<a>上。

.primary-navigation a {
    margin-top: 16px;
    margin-bottom: 12px;
    padding-left: 23px;
    padding-right: 23px;
    border-right: 1px dotted #7b7f82;
    position: relative;
    line-height: 1;
}

.primary-navigation li:last-child a {
    border-right: none;
}

有关MDN上的:last-child伪类的更多信息。

Answer 2

将此样式添加到您的CSS中：

 .primary-navigation { float: left; } .primary-navigation ul { margin-top: 16px; margin-bottom: 12px; padding-left: 23px; padding-right: 23px; border-right: 1px dotted #7b7f82; position: relative; line-height: 1; } .primary-navigation ul:last-child { border-right: none; } 

 <li class="primary-navigation"> <ul class="menu clearfix" id="menu-primary-menu">Page 1</ul> <ul class="menu clearfix" id="menu-primary-menu">Page 2</ul> <ul class="menu clearfix" id="menu-primary-menu">Page 3</ul> <ul class="menu clearfix" id="menu-primary-menu">Page 4</ul> </li> 

Answer 3

.primary-navigation a {
    margin-top: 16px;
    margin-bottom: 12px;
    padding-left: 23px;
    padding-right: 23px;
    /* border-right: 1px dotted #7b7f82;   <-- REMOVE from this declaration block */
    position: relative;
    line-height: 1;
}

.primary-navigation a:not(:last-child) {
    border-right: 1px dotted #7b7f82;
}

使用：not（）否定和：last-child伪类，除最后一个锚点外，所有锚点都具有边框。

仅供参考，此方法可能更简单：

a + a {
    border-left: 1px dotted #7b7f82;
}

使用相邻的同级选择器 ，可以将左侧边框立即应用于紧随另一个锚点的所有锚点。 这意味着第一个锚点没有左侧边界，而最后一个锚点没有右侧边界。

Answer 4

您可以使用CSS选择器:not(:last-child)选择所有元素，但最后一个。

 ul.menu { list-style-type : none; padding : 0px; } ul.menu > li { display : inline-block; padding-right : 2px; } ul.menu > li:not(:last-child) { border-right : solid 1px black; } 

 <ul class="menu"> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> </ul>