CSS选择器是否存在相邻兄弟答案

【问题标题】：CSS selector if exist adjacent siblingCSS选择器是否存在相邻兄弟
【发布时间】：2011-10-30 21:21:56
【问题描述】：

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

谢谢！

【问题讨论】：

stackoverflow.com/questions/29662009/… 接受的答案可能比这里接受的答案更好地解决这个问题，除了 IE8 中的支持要求。
CSS: Select element only if a later sibling exists的可能重复

标签： css css-selectors siblings

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：