Question

我的Wordpress页面看起来像这样：Page 1 |第2页|第3页|

我不想在第3页上使用右边界。如何删除它？

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

Answer 1

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

.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：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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() negation和:last-child伪类，除最后一个之外，所有锚点都有边框。

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

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

使用adjacent sibling selector，左侧边框可以应用于紧跟在另一个锚点之后的所有锚点。这意味着第一个锚点上没有左侧边框，最后一个锚点上没有右侧边框。

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>

将边框权限应用于除最后一个元素之外的所有元素

4 个答案: