如何设计姐妹或兄弟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

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

E.g。

div + div { padding: 10px; }

Answer 2

看看这篇文章，它是对兄弟姐妹和儿童选择者的一个很好的描述 http://css-tricks.com/child-and-sibling-selectors/

Answer 3

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

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

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

您是否尝试选择表单之前的所有div（＃rooms-booking-manager-change-search-form）？

如果不允许更改DOM you can't achieve that via pure CSS selectors，但是如果允许使用JQuery，则非常简单。

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

Working Fiddle