css - 将 CSS 规则应用于除最后一个之外的具有特定类的所有元素

Question

在下面的代码中，如何将 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>   

Answer 1

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

检查此片段

.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>

或

你可以使用最后一个 child 作为

.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>

希望对你有帮助