:last-child 将样式应用于所有元素

Posted 2023-03-06

【中文标题】:last-child 将样式应用于所有元素

【英文标题】：:last-child applying styles to all elements

【发布时间】：2017-02-16 20:13:58

【问题描述】：

我正在尝试创建一个容器选项卡。

我想将 border-right 应用于除我最后一个 li a 子元素之外的每个元素，但选择器 :last-child 将其应用于整个列表。 p>

我想删除最后一个li a

的border-right

看图：

但是会发生这种情况

div#tabs 
  width: 100%;

ul.tab 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

ul.tab li 
  width: 100%;

ul.tab li a 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #ccc;

ul.tab li a:last-child 
  border-right: none;

<div style="width:500px; margin:auto;">
  <div id="tabs">
    <ul class="tab">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
  </div>
</div>

【参考方案1】：

您正在使用的选择器 - :last-child - 适用于兄弟姐妹（即具有相同父级的元素）。

您的代码中的每个a 都是唯一的孩子。所以:last-child 适用于所有这些（:first-child、:only-child、:first-of-type 和其他一些structural pseudo-classes）。

考虑改为将:last-child 应用于li。

而不是这个：

ul.tab li a 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #ccc;


ul.tab li a:last-child 
  border-right: none;

试试这个：

ul.tab li 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-bottom: solid 1px #ccc;


ul.tab li:not(:last-child) 
  border-right: solid 1px #CCC;

div#tabs 
  width: 100%;

ul.tab 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

ul.tab li 
  width: 100%;

ul.tab li 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-bottom: solid 1px #ccc;

ul.tab li:not(:last-child) 
  border-right: solid 1px #CCC;

<div style="width:500px; margin:auto;">
  <div id="tabs">
    <ul class="tab">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
  </div>
</div>

6.6.5.7. :last-child pseudo-class

与:nth-last-child(1) 相同。 :last-child 伪类 表示一个元素，它是某个其他元素的最后一个子元素。

顺便说一句...

这里有一个更简单的整体解决方案：

li + li 
   border-left: solid 1px #ccc;

div#tabs 
  width: 100%;

ul.tab 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

ul.tab li 
  width: 100%;

ul.tab li 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-bottom: solid 1px #ccc;

ul.tab li + li 
  border-left: solid 1px #CCC;

<div style="width:500px; margin:auto;">
  <div id="tabs">
    <ul class="tab">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
    </ul>
  </div>
</div>

【参考方案2】：

每个<li> 中只有一个<a>，因此您必须选择最后一个<li>，然后选择子<a>。

像这样试试ul.tab li:last-child a

div#tabs 
  width: 100%;

ul.tab 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

ul.tab li 
  width: 100%;

ul.tab li a 
  display: inline-block;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #ccc;

ul.tab li:last-child a 
  border-right: none;

https://jsfiddle.net/uyk2ro7w/