我試圖設(shè)計(jì)div姐妹的風(fēng)格,但不是通過使用這個(gè)id # rooms-booking-manager-change-search-form
例子
div+#客房-預(yù)訂-經(jīng)理-更改-搜索-表單{ padding:10px;字體大小: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;
}
可以使用加號(hào)選擇另一個(gè)元素旁邊的一個(gè)元素。
例如
div + div { padding: 10px; }
您可以為所有表單項(xiàng)創(chuàng)建一個(gè)包裝器,如下所示
<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/的好文章
您是否嘗試選擇表單之前的所有div(# rooms-booking-manager-change-search-form)?
如果不允許您更改DOM,那么您無法通過純CSS選擇器實(shí)現(xiàn)這一點(diǎn),但是如果允許您使用JQuery,那么這就非常簡(jiǎn)單了。
$("#rooms-booking-manager-change-search-form").prevAll('div').css('background-color','red');
工作小提琴