如何从最后一行的元素中删除边框？

Posted 2023-03-06

【中文标题】如何从最后一行的元素中删除边框？

【英文标题】：How to remove border from elements in the last row?

【发布时间】：2019-08-24 03:30:06

【问题描述】：

我的布局是这样的（我输入的是内联样式而不是类的简化版本）

.qa 
  border-bottom: 1px solid #ccc;

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

这基本上呈现如下内容：

我的问题是：

如何去掉最后一行的边框？

【问题讨论】：

我认为 nth-last-child 可以帮助你css-tricks.com/almanac/selectors/n/nth-last-child

是的，我的想法是一样的，但只针对右下角的 div。我需要它来定位最后一行 div

只需添加：.qa:nth-last-child(-n+2) border: 0;

@bea：你的答案是正确的！把它作为一个答案，你会得到支持

【参考方案1】：

不要将其视为border-bottom。

将其视为border-top 并排除前两个元素。

所以不要这样：

.qa  border-bottom: 1px solid #ccc; 

试试这个：

.qa + .qa + .qa  border-top: 1px solid #ccc; 

.qa + .qa + .qa 
  border-top: 1px solid #ccc;

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

next-sibling combinator (+) 的目标是一个紧跟在另一个元素之前的元素，并且两者共享同一个父元素。

所以.qa + .qa 将只针对前面有一个.qa 元素的.qa 元素。

.qa + .qa + .qa 仅针对前面有两个 .qa 元素的 .qa 元素。

---

或者，你可以试试这个：

.qa:nth-child(n + 3)  border-top: 1px solid #ccc; 

.qa:nth-child(n + 3) 
  border-top: 1px solid #ccc;

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>


</div>

【讨论】：

您的第一个解决方案绝对不可读。我喜欢你的第二个选项。

@Raz0rwire，你有什么不明白的？

@Micheal_B 现在理解它不是问题，从现在开始查看 6 个月后的代码可能会让人头疼。也许我有点戏剧化..

【参考方案2】：

如果您可以在 .qa 的父容器中添加 :after 伪元素（确保您的父容器设置为 position: relative; 或 position: absolute;）

.qa 父元素的 CSS

    content: "";
    position: relative;
    bottom: 0;
    left:0;
    right:0;
    height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width)  */
    background: #fff; /* match this with your parent element background colour*/

【参考方案3】：

您可以为元素添加负下边距，然后隐藏溢出。这将隐藏不需要的边框。

.qa 
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 40%;


.wrapper 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;

<div class="wrapper">
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
</div>

即使一行中的元素数量不是 2，这个技巧也应该有效：

.qa 
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;


.wrapper 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

它也适用于响应式布局，其中列数可以在小屏幕上更改：

.qa 
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;


.wrapper 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;


@media all and (max-width:800px) 
  .qa 
    flex:1 1 30%;
  


@media all and (max-width:400px) 
  .qa 
    flex:1 1 40%;
  

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

【讨论】：

开箱即用的想法很棒！它涵盖了弹性行和列。这就是为什么我喜欢 SO，你可以学到很多东西！谢谢

@supersan 是的 ;) 它将涵盖所有不同的配置，更重要的是响应部分，因为我确信您的布局将更改为一列，例如在小屏幕上。

【参考方案4】：

1：使用另一个 CSS 类

我们可以创建另一个 CSS 类，它从存在元素中删除任何样式

.no-border 
  border-bottom: none;

然后将这个类添加到html元素例如

  <div class="qa no-border" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>

2：使用 CSS 伪选择器

.qa:last-child 
  border-bottom: none;


.qa:nth-last-child(2) 
    border-bottom: none;

【讨论】：

它们被称为伪类（developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes）

从未意识到它总是最后一个和倒数第二个元素。布局使它看起来像是第三个元素和第六个元素。谢谢

【参考方案5】：

根据您的布局判断，项目已编号：

  [1]  [2]
  [3]  [4]
  [5]  [6]

现在，您可以：

从第 5 和第 6 项中删除边框底部

.qa 
  border-bottom: 1px solid #ccc;


.qa:nth-of-type(5),
.qa:nth-of-type(6) 
  border-bottom: none;

将border-bottom 添加到第1-4 项：

.qa:nth-of-type(n+5) 
  border-bottom: 1px solid #ccc;

做类似的数学运算，但要添加border-top

---

您还可以翻转 flex 方向以使其更“合理”，但也需要固定高度（需要用于环绕，请参阅 here）：

.container 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

不同方向的项目编号：

  [1]  [4]
  [2]  [5]
  [3]  [6]

现在你移除每 3 个项目的边框底部：

.qa 
  border-bottom: 1px solid #ccc;


.qa:nth-of-type(3n) 
  border-bottom: none;

---

还有更复杂的修复。例如，您可以对行中的项目进行分组，并在基于行的选择器上应用边框。这将最接近您最初的真正意图：

.row .qa 
  border-bottom: 1px solid #ccc;


.row:last-of-type .qa 
  border-bottom: none;

【参考方案6】：

您可以使用border-top 并使用:nth-child CSS 选择器删除前两个。像这样：

.qa 
  border-top: 1px solid #ccc;


.qa:nth-child(-n+2) 
  border-top: none;

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

【参考方案7】：

当你知道你会立即覆盖它时，我不喜欢添加规则，所以这里有一个稍微不同的 aridlehoover 答案版本，只有一个 CSS 规则。

.qa:not(:nth-child(-n+2)) 
  border-top: 1px solid #ccc;

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>