Question

我有设置border-bottom

的问题

我有这样......

<article>
  <a></a>
  <div></div>
  <div></div>
</article>

但是文章中的反div是可变的。只有当其他div跟随时，我才需要在div上使用border-botom。所以当我有一个div时，不需要边框。当我有两个div时，只有第一个div有边框。当我有三个div时，只有第一个和第二个有边界......我怎么能这样做？

Answer 1

article div:not(:last-of-type) {
  border-bottom: 1px solid #FFFFFF; /* or whatever you want */
}

Answer 2

如果我理解正确，那么这就是你想要实现的目标：

<强> HTML

<article>
  <a></a>
  <div>First</div>
</article>

<article>
  <a></a>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</article>

<article>
  <a></a>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
  <div>Fourth</div>
</article>

<强> CSS

article{
  margin: 20px;
}
article div{
  border-bottom: 1px solid red;
}
article div:last-of-type{
  border-bottom: none;
}

相关部分：

article div:last-of-type{
  border-bottom: none;
}

Answer 3

如果你只有div，你可以检查是最后一个孩子还是最后一个：

div {
    border-bottom: 1px solid #000;
}
div:last-of-type {
    border-bottom: none;
}

如果您有div和其他元素并且只想在div之间使用边框，那么我建议使用border-top而不是+组合子（adjecent sibling selector）：

div + div {
    border-top: 1px solid #000;
}

不幸的是，它只匹配以下div，而不是后面的div，因此border-top使用。

Answer 4

坎。想出盒子。尝试在div后面的下一个div上修复一个border-top？

article div + div {
  border-top: 1px solid red;
}

也许？

如何为任何div设置border-bottom

4 个答案: