[英]Applying border-right to all elements except the last one
我的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>
使用: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
偽類的更多信息。
將此樣式添加到您的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>
.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;
}
使用相鄰的同級選擇器 ,可以將左側邊框立即應用於緊隨另一個錨點的所有錨點。 這意味着第一個錨點沒有左側邊界,而最后一個錨點沒有右側邊界。
您可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.