如何仅定位其他(特定)元素后面的元素？

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除了最后一个之外,那就是另一个故事了.你问的是移动选择器的主题,这是当前不可能的,但是当浏览器实现Level 4选择器时:

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

:最后一个孩子,在IE9 +中

由于你不能这样做,你可以做的是为所有div.row元素设置一个样式,添加你的边框,然后覆盖任何div.row:last-child将删除其边框的任何div.row那个是其父元素中的最后一个元素:

div.row {
    border-bottom: 1px solid #333;
}
div.row:last-child {
    border-bottom: 0px;
}

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

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