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中可以将span放在div之前，然后用css定位。

然后使用 css 相邻兄弟选择器来选择与 span 相邻的 div。

最后在 span 上放置一个绝对位置，并给它一个 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>