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语法是什么？

BTW，我需要这个必须适用于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>

Answer 2

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

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

2 个答案: