CSS選擇是否存在相鄰的兄弟

我有以下（簡化的）HTML結構CSS選擇是否存在相鄰的兄弟

<td> 
    <DIV class="t-numerictextbox"> 
     <DIV class="t-formatted-value">$0.00</DIV> 
     <INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName"> 
    </DIV> 
    <SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN> 
</td>

我想做的是設置背景顏色到母體div.t-numerictextbox爲紅色IF的span元素也存在。什麼是css語法來做這個條件選擇一個相鄰的兄弟姐妹？

順便說一句，我需要這個具有爲IE 8

後臺工作，如果你好奇：

我有一個asp.net MVC應用程序，現在用的是Telerik的MVC NumericTextBox控制。當我有ModelState驗證錯誤時，MVC框架會自動在元素上插入一個class =「input-validation-error」屬性，樣式表選取此類，以紅色突出顯示該元素。然而，它不適用於Telerik MVC控制（我假定Telerik的JavaScript覆蓋了這個）。

謝謝！

來源

2011-08-19 Raymond

接受的答案在http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists可能比這裏接受的答案更好的解決這個問題，除了在IE8中支持的要求。 – Jules

[CSS：只有當後來的兄弟姐妹存在才選擇元素]可能的重複（http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists） – Jules

可以將div放在html之前，然後用css定位。

然後使用一個css鄰接兄弟選擇器來選擇與該跨度相鄰的div。

最後放置一個絕對位置的跨度，並給它一個top:..px以使其低於div。

所以你會得到如下：

span + div { 
 
    background-color:red; 
 
}

<td> 
 
    <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span> 
 
    <div class="t-numerictextbox"> 
 
    <div class="t-formatted-value">$0.00</div> 
 
    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName"> 
 
    </div>   
 
</td>

來源

2011-08-19 19:56:17 vanErp

CSS不能做到這一點。如果div.t-numerictextbox存在，您可以設置span的樣式，但不能以其他方式。這是CSS的限制，但可能永遠不會改變。

來源

2011-08-19 19:59:11 Gerben

CSS選擇是否存在相鄰的兄弟

回答

相關問題