如何仅在div兄弟之间添加左右边框

Question

在CSS中我想只在兄弟姐妹之间添加垂直边框。第一个div和最后一个div兄弟不应该有一个垂直边框b / c它将位于div链的末端。我怎么能用css3做到这一点？

示例：

<section>
<div>Test1</div>
<div>Test2</div>  
<div>test3</div>
  ...
<div>Testn</div>
</section>

CSS3：

section ~ div {
border-left: 1px solid #557;
border-right: 1px solid #557;
}

Answer 1

试试这个：

section ~ div {
  border-left: 2px solid #557;
}
section ~ div:first-child {
  border-left: none !important;
}

除第一个div之外的所有div在其左侧都有一个2px的边框;第一个div在左侧没有边框。请注意，要使其在IE8及更早版本中运行，您需要声明一个＆lt;！DOCTYPE＆gt;在页面的开头。

Answer 2

我不知道我是否理解你，但首先要说的是你可能误解了~ - 符号。使用section ~ div，您可以设置所有兄弟姐妹（div）的样式。 （例如：<section></section><div id="firstSibling"></div>...）

您可能想要做的是这样的事情：

section div:not(:first-child):not(:last-child) {
  border-left: 1px solid #557;
  border-right: 1px solid #557;
}

（如果我理解你的话）

另见JsFiddle-Demo