将CSS规则应用于具有特定类但最后一个的所有元素[重复]答案

【问题标题】：Apply CSS Rule to All Element With Specific Class But The Last [duplicate]将CSS规则应用于具有特定类但最后一个的所有元素[重复]
【发布时间】：2017-05-18 08:55:39
【问题描述】：

您能否看一下这个演示并告诉我如何将 CSS 规则应用到所有特定类 .box 但不能应用到最后一个？

我已经尝试过:not(:last-of-type) 和:not(:last-child)，但他们没有做这项工作

.box{
  height:40px;
  width:100%;
  padding:12px;  
}
.box:not(:last-of-type){
  border-bottom: 1px solid #ddd; 
}
.box:not(:last-child){
  border-bottom: 1px solid #ddd; 
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

【问题讨论】：

所以这是实际的答案。（问题已关闭，因此无法添加为答案。） Stackoverflow（和 jsfiddle）附加额外的隐藏元素 body。 :last-child 最终以这些添加的元素为目标，并且由于它们是隐藏的，因此该样式似乎具有意想不到的效果。 CodePen 不这样做，因此您的示例可以正常工作there。一些答案建议使用包装器元素，这当然有助于缓解此问题，但没有说明为什么会出现问题。
@BoltClock 这不是那个的副本。虽然它谈论的是:last-child，但这个问题和它的答案都在谈论一个不同的问题。
@Ouroborus：原则上问题是相同的：提问者希望将样式应用于（除了）具有特定类的最后一个元素，除了修改之外没有任何其他解决方案的 HTML。无论是否有任何隐藏元素都是如此。

标签： css

【解决方案1】：

试试这个：

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.box:last-child {
  border-bottom: 0; 
}

【讨论】：

【解决方案2】：

尝试用父元素包装它并尝试应用如下样式

检查这个sn-p

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-of-type {
  border:none ;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

或

你可以使用 last-child as

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-child {
  border:none;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

希望对你有帮助

【讨论】：

最终规则应该是.box:last-child { border-bottom:none; }。不应该覆盖不需要覆盖的东西。 .box:last-child 比.box 具有更高的特异性，因此不需要使用!important。
是的，没错:)

【解决方案3】：

如果你想使用:not(:last-child) 将你的 div 包装在另一个 div 中。问题是浏览器无法识别哪个是最后一个孩子。

.box{
  height:40px;
  width:100%;
  padding:12px;  
}

.box:not(:last-child){
  border-bottom: 1px solid #ddd;
}

<div>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

不建议使用覆盖样式的方法，即为所有样式指定样式，然后为last-child 指定另一组样式，例如将border: 1px 指定给.box 并将border: none; 指定给.box:last-child。这是覆盖样式

【讨论】：

body 不是容器吗？所以最后一个.box 将是:last-child 的body。
是的。这是一个例外。如果要使用:last-child 或:not(:last-child)，则应将其包裹在主体以外的包装器中。尝试编辑我的jsFiddle
我调查过了。这不是一个例外，只是 Stackoverflow sn-ps 的一个特殊怪癖。 SO 将 script 元素附加到 sn-p 主体，因此算作 :last-child 的 body 而不是预期的元素。
哦，谢谢。但我认为最好用 div 包装对吧？
视情况而定。 :not(:last-child) 无论如何都是一个奇怪的结构。如果你只需要解决这个问题，是的，包装是最好的解决方案。