在没有javascript的情况下直观地组合相邻的CSS块

Question

我有一个网站，它通过WYSIWYG内联编辑器提供可编辑的内容，并且用户不太可能理解需要将DIV放在类似的代码块中进行格式化，从而导致html类似于：

<div class="borderBlock">Content...</div>
<div class="borderBlock">Content...</div>
<div>Other content</div>
<div class="borderBlock">Content...</div>

使用当前的CSS：

.borderBlock {
margin: 8px 0;
border: 1px solid;
border-radius: 4px;
}

这给每个div它自己独立的边框 - 不是很想要的，理想情况下前两个div会分享边框和背景颜色！

我知道我可以使用css，例如：

:not(.borderBlock) + .borderBlock { }

选择borderBlock类的第一个块 - 为块的开头应用格式，类似地：

.borderBlock + :not(.borderBlock)

会选择第一个无borderBlock元素...但是我找不到一种方法来选择一个块中没有被另一个div专门包围的最后一个borderBlock元素 - 在上面的html中使用：last-child或：last-child-of-type将只选择第四个div，而不是将第二个div设置为borderBlock的结尾。同样：第一个孩子（-of-kind）不会设置第二个边界块的样式。

是否有一个不使用JavaScript的CSS解决方案，并且不涉及在每个所需的边界块周围放置一个包含div？等同于CSS前瞻性正则表达式的东西，而不是标准的CSS后视式。

Answer 1

这样的事情怎么样？：

http://jsfiddle.net/Hegxc/4/

使用：first-of-type和：last-of-type

这是你想要实现的目标还是我误解了你想要的东西？

Answer 2

目前，您不能使用CSS选择器，不使用JavaScript或修改HTML，因为没有先前的兄弟选择器。