除了最后一个元素，将border-right应用于所有元素

Question

我有类似这样的WordPress页面：Page 1 | Page 2 | Page 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>

- Mehmet

---

使用 :last-child。 - Jaqen H'ghar

Answer 1

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

.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 伪类的内容。

- Khaled Mashaly

---

嗯，它使得每个边界都消失了。 - Mehmet

除非<a>不是.primary-navigation的直接子元素，否则它应该可以工作。你能发布你的HTML代码吗？ - Khaled Mashaly

正如预期的那样，<a> 不是 .primary-navigation 的直接子元素。请查看我的更新代码。 - Khaled Mashaly

Answer 2

您可以使用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>

- Anwar

Answer 3

将以下样式添加到您的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>

- mbadeveloper

---

我尝试使用:last-child，但在WordPress上它不起作用。我添加了你的代码，但什么也没改变。 - Mehmet

你可以添加代码尝试查看为什么它不能正常工作吗？ - mbadeveloper

<ul class="menu clearfix" id="menu-primary-menu"> <?php wp_list_pages('title_li='); ?> </ul> - Mehmet

@Mehmet，我为你添加了一个示例，你需要在类定义中使用“ul”而不是“a”标签。 - mbadeveloper

Answer 4

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

使用相邻兄弟选择器，可以为紧接在另一个锚点后面的所有锚点应用左侧边框。这意味着第一个锚点没有左侧边框，最后一个锚点没有右侧边框。

- Michael Benjamin

---

所有边框都消失了。这是因为WordPress页面吗？ - Mehmet

你可能有其他样式覆盖了这些样式。尝试在每个规则后面添加!important，看看是否有效。 - Michael Benjamin

真的很喜欢这里的 a + a。我在这里只是试图记住如何为表格单元格（td）中的边框使用 :not(:last-child)，而 td + td { border: 1px solid; } 的效果太棒了，不用它都觉得可惜！ - Neil Gaetano Lindberg