14

我有以下（简化的）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 覆盖了它）。

谢谢！

4

2 回答 2

24

可以在html中将span放在div之前，然后用css定位。

然后使用 css 相邻兄弟选择器选择与 span 相邻的 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-19T19:56:17.377 回答
1

CSS 做不到。如果 div.t-numerictextbox 存在，您可以设置跨度的样式，但反之则不行。这是 css 的一个限制，但可能永远不会改变。

于 2011-08-19T19:59:11.790 回答