0

我有一个网站，它通过 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)

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

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

4

2 回答 2

0

像这样的东西呢？：

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

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

那是您要实现的目标还是我误解了您要寻找的目标？

于 2012-10-12T08:32:35.120 回答
0

目前，您无法使用 CSS 选择器来执行此操作，而无需使用 JavaScript 或修改您的 HTML，因为没有前面的兄弟选择器。

于 2012-10-12T14:02:37.097 回答