0

这是我的代码的简化片段：

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

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

4

4 回答 4

6

基本 CSS：

.class-B .class-A {
   ...
}
于 2012-04-10T03:25:03.083 回答
0

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

.class-B .class-A {
    /* ... */
}
于 2012-04-10T03:25:30.830 回答
0

当然可以。只需使用父类来定位它。

http://jsfiddle.net/DpddQ/

.class-B .class-A { background: blue; color: white; }
.class-C .class-A { background: red; }
​
于 2012-04-10T03:25:46.227 回答
0

是的，有很多替代方案：

#work-5 .class-A { }
#work-6 .class-A { }

或者

.work-5 .class-A { }
.work-6 .class-A { }

或者

#work-5.work-5 .class-A { }
#work-6.work-6 .class-A { }

或者

#work-5.work-5.class-B .class-A { }
#work-6.work-6.class-C .class-A { }

根据您的需要，但您的选择器越具体，它的优先级就越高。

于 2012-04-10T03:25:47.723 回答