我的布局是这样的 (我键入的是带有内联样式的简化版本, 而不是类)

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

    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

这基本上呈现如下所示:

我的问题是:

如何摆脱最后一行中的边框？

您可以向元素添加负底部边距, 然后隐藏溢出。这将隐藏不需要的边框。

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

即使行中的元素数与 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%;
}

它还将使用可重排的布局, 在小屏幕上, 列数可以更改:

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

1: 使用另一个 CSS 类

我们可以创建另一个 CSS 类, 该类将删除存在元素中的任何样式

.no-border {
  border-bottom: none;
}

然后将此类添加到 html 元素中, 例如。

    Question
    Answer

2: 使用 CSS 伪选择器

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

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

不要把它看作 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;
}

    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

下一个同级组合器( + ) 的目标是一个元素, 该元素前面有另一个元素, 并且两者共享相同的父元素。

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

    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

从您的布局来看, 这些项目是编号的:

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

• 将边界底部添加到第 14 个项目:

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

• 做类似的数学, 但添加border-top

您也可以翻转 flex 方向, 使其更 "合理", 但也需要固定的高度 (需要包装, 请参见此处):

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

您可以 border-top 使用 :nth-child 和删除 css 选择器的前两个。喜欢这个：

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

如果可以 :after 在. qa 的父容器中添加伪元素 (请确保父容器设置为 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*/
}

我不喜欢添加规则, 当你知道你要立即覆盖它, 所以这里有一个略有不同的版本的 aridlehoover 的答案只有一个 css 规则。

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

    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer