Question

我是网络开发的新手。这里我有CSS

.bgStatusMenuOptions li:not(:last-child) {
  font: var(--typography-body1);
  border-bottom: solid 1px #f6f6f6;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.41px;
  background-color: #ffffff; /** Need to handle in the style component as well **/
}

现在，在此，我不想将边框应用于仅其他CSS应该应用的最后一个元素。我有一个类似的解决方案，

创建两个差异位置。但是有什么办法可以在同一个地方做到这一点？

Answer 1

否，您将需要两个不同的样式规则

.bgStatusMenuOptions li {
   ...rules for all
} 
.bgStatusMenuOption li:last-child {
  ...rules for last child only
}

Answer 2

您可以用另一种方式完成

.bgStatusMenuOptions li {
  font: var(--typography-body1);
  border-bottom: solid 1px #f6f6f6;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.41px;
  background-color: #ffffff; /** Need to handle in the style component as well **/
} 

.bgStatusMenuOptions li:last-child {
  border-bottom: 0;
}

Answer 3

您应该将其简单地添加到CSS中：

.bgStatusMenuOptions li:last-child {
  border-bottom: none;
}

这将删除最后一个孩子的底部边框。其他应保持不变：

.bgStatusMenuOptions li {
  font: var(--typography-body1);
  border-bottom: solid 1px #f6f6f6;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.41px;
  background-color: #ffffff; /** Need to handle in the style component as well **/
}

Answer 4

.bgStatusMenuOptions li:last-child {
  font: var(--typography-body1);
  border-bottom: solid 1px #f6f6f6;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.41px;
  background-color: #ffffff; /** Need to handle in the style component as well **/
}

如果您知道元素，则可以使用nth-last-child以及-

p:nth-last-child(2) {
  background-color: red;
}

<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>

将CSS应用于最后一个孩子

4 个答案: