如何选择一个类别为A的元素，而该元素位于另一个类别为B的元素下？

Question

下面是我的代码的一个简化片段：

<li id="work-5" class="work-5 class-B">
    <div>some other stuff</div>
    <div class="class-A"></div>
</li>
<li id="work-6" class="work-6 class-C">
    <div class="class-A"></div>
</li>

我想对类为A的元素应用一些CSS样式，它位于类为B的元素的树下。换句话说，我希望将不同的样式应用于具有相同类( class -A)的两个元素，这两个元素位于具有不同类的两个不同元素的树下的某个位置(不一定是第一个子元素)。我可以使用CSS选择器来实现这一点吗？

Answer 1

基本CSS：

.class-B .class-A {
   ...
}

Answer 2

两个类选择器和一个后代组合器！

.class-B .class-A {
    /* ... */
}

Answer 3

当然可以。只需使用父类将其作为目标。

http://jsfiddle.net/DpddQ/

.class-B .class-A { background: blue; color: white; }
.class-C .class-A { background: red; }
​