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

【问题标题】：:last-child applying styles to all elements:last-child 将样式应用于所有元素
【发布时间】：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>

【问题讨论】：

标签： html css css-selectors flexbox

【解决方案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/

【讨论】：