11

我有一些由 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。

4

3 回答 3

11

修改逻辑

由于您需要 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将删除div.row其父元素中最后一个元素的边框的任何元素：

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

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

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

于 2012-06-05T15:19:06.727 回答
3

您可以还原逻辑并将 aborder-top应用于.row + .row元素

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

相邻的兄弟选择器 ( +) 可以正常工作IE7+

于 2012-06-05T15:19:24.013 回答
0

这适用于 ie7 和其他

.row + h3 {
  border-top : 1px black solid;
}
于 2012-06-05T15:38:44.860 回答