如何针对仅在另一个（特定）元素后面的元素进行定位？

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 class="row odd">Here's some content</div>，因为其后面还有另一个行。

作为后端开发人员，CSS不是我的强项。我们需要支持IE7。

- EmmyS

---

据我所知，您无法根据子元素为父元素分配CSS。您需要使用JavaScript来实现此目的。 - Jashwant

关系不是父子关系 - div不是h3的子元素，它们只是跟随在后面。 - EmmyS

抱歉，是我的错。不过我已经添加了一个解决方法。 - Jashwant

Answer 1

修改后的逻辑

因为你需要支持 IE7，所以将边框放在 h3 元素上：

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

这个方法在几乎所有现代浏览器和IE7上都可以运行：

示例： http://jsfiddle.net/jonathansampson/BjUf9/1/

选择器中明确的主题

如果您坚持只将其放置在除最后一个之外的每个div.row上，那么这就是另一回事了。 您正在询问如何移动选择器的主题，目前还不可能，但当浏览器实现第四级选择器时就可以了：

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中不能工作。但是第一个解决方案提出的修改逻辑应该可以解决这个问题。

- Sampson

---

WD是否已更新，或者您现在是以ED为基础回答CSS4的问题？（像主题令牌这样的东西是我为什么考虑从此不再在我的答案中提到CSS4的原因之一...） - BoltClock

@F.Calderan 没错。我想的是 CSS 2.1 选择器。即将进行编辑。 - Sampson

只要它不会导致其他问题，如果在IE7中无法显示，我们会处理的。 - EmmyS

@BoltClock 我不记得哪个使用了 $，哪个使用了 !。我通常会提到这两种语法都在流传。 - Sampson

@JonathanSampson - 谢谢！修改后的逻辑可行。我真的需要学习更多关于CSS的知识... - EmmyS

Answer 2

您可以反转逻辑并对.row + .row元素应用 border-top

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

+ 相邻兄弟选择器在 IE7+ 上可以正常工作。

- Fabrizio Calderan

Answer 3

这对我来说在ie7和其他浏览器上都有效。

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

- Jashwant