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

Question

我正在尝试创建容器标签。

我想对除上一个 border-right 子项之外的每个元素应用 li 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

您正在使用的选择器 - SELECT * from users where username="" "=" " and password=" "" = "" - 适用于兄弟姐妹（即具有相同父母的元素）。

代码中的每个:last-child都是唯一的孩子。因此a适用于所有这些（:last-child，:first-child，:only-child以及其他一些structural pseudo-classes也是如此。

请考虑将: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;
}

  

6.6.5.7. :last-child pseudo-class

     

与<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>相同。 :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;
}

Answer 2

每个<a>只有一个<li>，因此您必须选择上一个<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/