将border-right应用于除最后一个元素之外的所有元素

Posted 2023-03-06

【中文标题】将border-right应用于除最后一个元素之外的所有元素

【英文标题】：Applying border-right to all elements except the last one

【发布时间】：2017-02-26 21:48:45

【问题描述】：

我的 Wordpress 页面如下所示： 第 1 页 |第 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

【参考方案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伪类。

【讨论】：

嗯，它让每个边界都消失了

它应该可以工作，除非<a>s 不是.primary-navigation 的直接子代。你能发布你的html 代码吗？

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

【参考方案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>

【参考方案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，左侧边框可以应用于紧跟另一个锚点的所有锚点。这意味着第一个锚点没有左侧边框，最后一个锚点没有右侧边框。

【讨论】：

它让所有的边框都消失了。是因为 Wordpress 页面吗？

您可能有其他样式覆盖这些样式。尝试将!important 添加到每个规则中，看看是否有效。

【参考方案4】：

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

【讨论】：

我尝试使用 :last-child 但它在 Wordpress 上不起作用。我添加了您的代码，但没有改变任何内容。

你能添加你的代码来看看它为什么不工作吗？

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