css - 如何仅定位后面跟着另一个(特定)元素的元素？

Question

我有一些由 Drupal View 生成的代码。它看起来像这样(为清楚起见，已精简):

<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:

fiddle :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 将删除作为其父元素中最后一个元素的任何 div.row 的边框:

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

fiddle :http://jsfiddle.net/jonathansampson/BjUf9/

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