Question

你能不能看看这个演示，让我知道如何将CSS规则应用到所有特定类.box但不是最后一个？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

或

你可以使用last-child作为

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

Answer 2

试试这个：

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

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

Answer 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，使用样式覆盖是不明智的。 {{1}}。这是覆盖样式

将CSS规则应用于具有特定类的所有元素但最后

3 个答案: