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

Question

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

我想对border-right除了我的最后一个li a孩子之外的每个元素应用a ,但是选择器:last-child将它应用于整个列表.

我想删除border-right最后一个li 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 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>

Answer 1

您正在使用的选择器:last-child- 适用于兄弟姐妹(即具有相同父母的元素).

a您的代码中的每一个都是独生子女.因此,:last-child适用于所有的人(因此将:first-child,:only-child,:first-of-type,和其他一些结构性伪类).

考虑应用: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 伪类

与...相同: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>