CSS选择器如果存在于兄弟姐妹附近

Question

我有以下(简化)HTML结构

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

如果span元素也存在,我想要做的是将父div.t-numerictextbox的背景颜色设置为红色.在相邻的兄弟上执行此条件选择的css语法是什么？

顺便说一句,我需要这个必须适用于IE 8.

背景,如果你很好奇:

我有一个asp.net MVC应用程序,并使用Telerik MVC NumericTextBox控件.当我有ModelState验证错误时,MVC框架会自动在元素上插入class ="input-validation-error"属性,样式表会选择此类以突出显示红色元素.但是,它不适用于Telerik MVC控件(我假设因为Telerik的javascript覆盖了这个).

谢谢!

Answer 1

可以在html中将div放在div之前,然后用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>