CSS选择是否存在相邻的兄弟

我有以下（简化的）HTML结构CSS选择是否存在相邻的兄弟

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

我想做的是设置背景颜色到母体div.t-numerictextbox为红色IF的span元素也存在。什么是css语法来做这个条件选择一个相邻的兄弟姐妹？

顺便说一句，我需要这个具有为IE 8

后台工作，如果你好奇：

我有一个asp.net MVC应用程序，现在用的是Telerik的MVC NumericTextBox控制。当我有ModelState验证错误时，MVC框架会自动在元素上插入一个class =“input-validation-error”属性，样式表选取此类，以红色突出显示该元素。然而，它不适用于Telerik MVC控制（我假定Telerik的JavaScript覆盖了这个）。

谢谢！

来源

2011-08-19 Raymond

接受的答案在http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists可能比这里接受的答案更好的解决这个问题，除了在IE8中支持的要求。 – Jules

[CSS：只有当后来的兄弟姐妹存在才选择元素]可能的重复（http://stackoverflow.com/questions/29662009/css-select-element-only-if-a-later-sibling-exists） – Jules

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

来源

2011-08-19 19:56:17 vanErp

CSS不能做到这一点。如果div.t-numerictextbox存在，您可以设置span的样式，但不能以其他方式。这是CSS的限制，但可能永远不会改变。

来源

2011-08-19 19:59:11 Gerben

CSS选择是否存在相邻的兄弟

回答

相关问题