您可以向元素添加负底部边距, 然后隐藏溢出。这将隐藏不需要的边框。
.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;
}
我们可以创建另一个 CSS 类, 该类将删除存在元素中的任何样式
.no-border {
border-bottom: none;
}
然后将此类添加到 html 元素中, 例如。
Question
Answer
.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]
现在, 您可以:
.qa {
border-bottom: 1px solid #ccc;
}
.qa:nth-of-type(5),
.qa:nth-of-type(6) {
border-bottom: none;
}
.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