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覆盖了它）。

谢谢！

- Raymond

---

https://dev59.com/yV0b5IYBdhLWcg3wC9eJ 的被接受答案可能比这里的被接受答案更好地解决了这个问题，除了需要在IE8中支持的要求。 - Jules

可能是[CSS：仅选择存在后续兄弟的元素]的重复问题（https://dev59.com/yV0b5IYBdhLWcg3wC9eJ） - Jules

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>

- vanErp

Answer 2

CSS无法做到这一点。如果存在div.t-numerictextbox，您可以为span设置样式，但反过来不行。这是CSS的限制，但可能永远不会改变。

- Gerben