jquery - 如何设置姐妹或兄弟 div 的样式

Question

感谢您抽出宝贵时间帮助我！

我正在尝试设置姐妹 div 的样式，但不使用此 ID #rooms-booking-manager-change-search-form

例子

div + #rooms-booking-manager-change-search-form { padding:10px; font-size:18px; }

<div>Arrival Date: 19/09/2013</div>
<div>Departure Date: 21/09/2013</div>
<div>Nights: 2</div>
<form id="rooms-booking-manager-change-search-form"></form>

解决方案：

div ~ #rooms-booking-manager-change-search-form {
    background: red;
}

Answer 1

您可以使用加号选择另一个元素旁边的元素。

例如

div + div { padding: 10px; }

Answer 2

您可以为所有表单项创建一个包装器，如下所示

<div class="form-item-wrapper>
    <div class="form-item form-type-item">
    <div class="form-item form-type-item">
</div>

然后CSS是：

<style>
    .form-item-wrapper > div{
        padding: 10px  
    }
</style>

这是一篇好文章http://css-tricks.com/child-and-sibling-selectors/

Answer 3

看看这篇文章它是兄弟和子选择器的一个很好的描述 http://css-tricks.com/child-and-sibling-selectors/

Answer 4

我希望我能正确理解你（编辑你的问题并更清楚地解释你自己）

您是否尝试选择div表单之前的所有 s (#rooms-booking-manager-change-search-form)？

如果不允许更改 DOM，则无法通过纯 CSS 选择器来实现，但如果允许使用 JQuery，那么它非常简单。

$("#rooms-booking-manager-change-search-form").prevAll('div').css('background-color','red');

工作小提琴