css - 在 CSS 中，是否可以选择换行前的最后一个元素？

Question

例如，

我有一堆并排的div，每个div都有一个border-right：1px

父元素有一定的宽度，所以在某个点，额外的 div 会换行到下一行。

本质上，我不希望换行前的最后一个 div 有一个右边框。

如果这没有意义，我可以创建一个小提琴。我只想知道我可以在换行之前定位最后一个 div。（last-child 将定位到下一行不需要的最后一个 div。）

Answer 1

找出当前宽度（硬编码或使用 JS）获得的列数，然后使用nth-child选择器。

例如，如果您每行有 3 列，每列都有div一个类，col则为

div.col:nth-child(3n){border-right:none;}

可以根据divs 的每一行中有多少列来修改第 n 个子选择器。

Answer 2

无法从多行中选择最后一项，只有:last-child.

如果您的元素按列排列，您可能会对多列模块感兴趣。它有一个类似于边框的列规则属性，但只在列之间垂直显示，从不在外边缘上。

http://cssdeck.com/labs/febtiiet

.container {
  columns: 20em;
  column-rule: 1px solid;
}

可能需要前缀： http ://caniuse.com/#feat=multicolumn

否则，您将需要按照 MrLister 的建议切换到将边框放在左侧：

http://cssdeck.com/labs/f8qjngd4

.container {
  overflow: hidden;
  padding: 0;
  border-style: none;
}

.child {
  border-left: 1px solid;
  position: relative;
  left: -1px;
  display: inline-block;
  width: 20em;
}