Css 父选择器取决于存在的另一个类答案

【问题标题】：Css parent selector depending on another class being presentCss 父选择器取决于存在的另一个类
【发布时间】：2012-06-03 13:41:18
【问题描述】：

我的标记是这样的：

<li class="cont">
    <a> Click Here</a>
    <form>   </form>
</li>

如果表单应用了一个类，例如：ng-dirty，我想更改锚标记的背景颜色。该表单由 angularJs 框架应用这个类，当发生这种情况时，我想通过更改其背景颜色来突出显示“a”标签。

如何使用纯 Css（或 sass）来做到这一点？

谢谢，克里斯。

【问题讨论】：

标签： css css-selectors sass angularjs

【解决方案1】：

你可以很简单地用 angular 做到这一点：

<a ng-class="{'dirty-class': myForm.$dirty}"> Click Here</a>
<form name="myForm">
</form>

http://jsfiddle.net/XYTcL/

【讨论】：

【解决方案2】：

使用下一个 css 应该可以工作：

.ng-dirty a {
    background-color: red;
}

【讨论】：

【解决方案3】：

对此没有特定的 CSS 选择器，但您可以通过组合 HTML change 和 box-direction:reverse; 来实现所需的效果。像这样写：

HTML

<div class="cont">
 <form class="ng-dirty">   
     <input type="text" value="Hi"/>
 </form>
 <a> Click Here</a>
</div>

CSS

.cont{
    display:-moz-box;
    display:box;
    display:-webkit-box;
    box-direction: reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;  
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}
.cont > *{
    display:block;
}
.ng-dirty + a{
    background:yellow;
}

检查这个http://jsfiddle.net/8YnTw/ 它是纯css。

【讨论】：