如何仅定位其他（特定）元素后面的元素？

Question

我有一些由Drupal视图生成的代码。它看起来像这样（为了清晰起见而被剥离）：

<div class="group_content">
  <h3>Header Link</h3>
  <div class="row odd">Here's some content</div>
  <h3>Another Header Link</h3>
  <div class="row even">Here's some more content</div>
</div>

<div class="group_content">
  <h3>Header Link 2</h3>
  <div class="row odd">Here's some content 2</div>
</div>

因为这是由CMS生成的，所以我对渲染代码的处理方式有限 - 例如，我无法在h3元素中添加偶数/奇数类。

我如何（在css中）仅定位另一个div class=row后面的div class=row？如果组中有多行，我需要在div中添加一个底部边框作为可视分隔符。因此，使用我的示例代码，会有一个边框应用于div class="row odd">Here's some content</div>，因为它后面有另一行。

我是后端开发人员，所以CSS不是我的强项。我们确实需要支持IE7。

Answer 1

修改逻辑

由于您需要IE7支持，请将边框放在h3元素上：

div.row + h3 {
    border-top: 1px solid black;
}

这几乎适用于所有现代浏览器和IE7：

小提琴：http://jsfiddle.net/jonathansampson/BjUf9/1/

选择器中的显式主题

如果你坚持只把它放在每个div.row而是最后一个，这是一个不同的故事。你问的是移动选择器的主题，这是当前不可能的，但是当浏览器实现4级选择器时：

div.row! + div.row {
    /* These styles apply to the first div.row
       $div.row + div.row is another potential 
       syntax */
}

：last-child，在IE9 +

中

由于您无法做到这一点，您可以做的是为所有div.row元素设置样式，添加边框，然后覆盖任何div.row:last-child的样式，这将删除任何{{1}的边框1}}这是其父级中的最后一个元素：

div.row

小提琴：http://jsfiddle.net/jonathansampson/BjUf9/

我应该注意到，不幸的是，这在IE7中不起作用。但是第一个解决方案中提出的修改逻辑应该在那里照顾你。

Answer 2

您可以恢复逻辑并将border-top应用于.row + .row元素

.row + .row {
   border-top : 1px #ccc solid;
}

相邻的兄弟选择器（+）在IE7+

上正常工作

Answer 3

这适用于ie7和其他人

.row + h3 {
  border-top : 1px black solid;
}