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>

我想将一些CSS样式应用于具有类-A的元素，该类位于具有类-B的元素的树下。换句话说，我想对具有相同类（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; }

Answer 4

是的，有很多替代方案：

#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 { }

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

如何在类B的另一个元素下选择A类元素？

4 个答案: