CSS BETWEEN選擇器？

我想要做的是改變一個元素的樣式，它基於div兩側的類。例如：

<div class="positive">...</div> 
<div class="divider"></div> 
<div class="negative">...</div>

「積極」和「消極的」階級有不同的背景和任務可能修改的用戶交互等我想div.divider基礎上的div的類來選擇背景在它的兩邊。我們有從積極到積極，積極積極，積極積極，消極積極，消極積極等「轉變」的分工。還有更多的國家，這些只是一些例子。

這個想法是當JS更改div.divider任一側的div類時，我希望divider的風格（主要是背景）發生變化。

這可能嗎？

來源

2011-06-23 n8wrl

的'+'的組合子只去一個辦法... – BoltClock

@ n8wrl，只是想知道如果有任何更多的解釋/幫助，我可以提供。 – Richard

CSS沒有，也沒有（我不認爲），有一個BETWEEN選擇器。瀏覽器將網頁作爲流處理，而選擇器之間需要引用先前讀取的元素，從而減慢渲染時間。 This頁面有一個關於parent選擇器的說明，它也適用於between選擇器。

僅僅使用中間div作爲樣式元素在語義上不合適，以下可能是更好的選擇。

我認爲最好的方法是使用相鄰的選擇響應其鄰居改變無論是positive或negative上部。使用CSS3：

.positive + .negative { border-top-image:url('NEGATIVE_BELOW_POSTIIVE'); } 
.negative + .positive { border-top-image:url('POSITIVE_BELOW_NEGATIVE'); }

你也可以使用CSS3多背景圖片按：

.positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE'); 
         background-position:center-top; 
         } 
.negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE'); 
         background-position:center-top; 
         }

在CSS2和更早的版本，你可能需要預生成所有的背景圖像，並用它們改變以上策略。

.positive, .negative { background-image:url('DEFAULT'); } 
.positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE'); } 
.negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE'); }

來源

2011-06-23 16:21:15 Richard

CSS BETWEEN選擇器？

回答

相關問題