CSS 如何仅定位后跟另一个（特定）元素的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10900006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I target only elements that are followed by another (specific) element?
提问by EmmyS
I have some code that is generated by a Drupal view. It looks like this (stripped down for clarity):
我有一些由 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>
Because this is generated by a CMS, there's a limit to what I can do about the rendered code - for example, I can't add an even/odd class to the h3 elements.
因为这是由 CMS 生成的，所以我可以对呈现的代码做些什么是有限的 - 例如，我不能向 h3 元素添加偶数/奇数类。
How can I (in css) target only the div class=rowthat is followed by another div class=row? If there are more than one row in a group, I need to add a bottom border to the div to act as a visual separator. So, using my example code, there would be a border applied to div class="row odd">Here's some content</div>because it has another row following it.
我怎样才能（在 css 中）只定位div class=row后面跟着另一个的div class=row？如果一组中有不止一行，我需要在 div 中添加一个底部边框作为视觉分隔符。因此，使用我的示例代码，将应用一个边框，div class="row odd">Here's some content</div>因为它后面有另一行。
I'm a backend developer, so CSS is not my strong suit. We do need to support IE7.
我是一名后端开发人员，所以 CSS 不是我的强项。我们确实需要支持IE7。
回答by Sampson
Modified Logic
修改逻辑
Since you need IE7 support, place the border on the h3element instead:
由于您需要 IE7 支持，请将边框放在h3元素上：
div.row + h3 {
border-top: 1px solid black;
}
This will work in just about every modern browser, and IE7:
这几乎适用于所有现代浏览器和 IE7：
Fiddle: http://jsfiddle.net/jonathansampson/BjUf9/1/
小提琴：http: //jsfiddle.net/jonathansampson/BjUf9/1/
Explicit Subjects in Selectors
选择器中的显式主题
If you insist on placing it only on every div.rowbut the last, that's a different story. You're asking about moving the subject of a selector, which is not currently possible, but will be when browsers implement Level 4 selectors:
如果你坚持只把它放在每一个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, in IE9+
:last-child, IE9+
Since you cannot do that, what you can do is set a style for all div.rowelements, adding your border, and then overriding that for any div.row:last-childwhich will remove that border for any div.rowthat is the last element in its parent:
由于您不能这样做，您可以做的是为所有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/
小提琴：http: //jsfiddle.net/jonathansampson/BjUf9/
I should note that this will not work in IE7, unfortunately. But the modified logic presented in the first solution should take care of you there.
我应该注意到，不幸的是，这在 IE7 中不起作用。但是第一个解决方案中提出的修改后的逻辑应该在那里照顾你。
回答by Fabrizio Calderan
you could revert the logic and apply a border-topto .row + .rowelements
您可以恢复逻辑并将 aborder-top应用于.row + .row元素
.row + .row {
border-top : 1px #ccc solid;
}
the adjacent sibling selector (+) works fine on IE7+
相邻的同级选择器 ( +) 可以正常工作IE7+
回答by Jashwant
This works for me on ie7 and others
这在 ie7 和其他人上对我有用
.row + h3 {
border-top : 1px black solid;
}
