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

这里是我的代码简单的代码片段：如何选择具有类B的另一个元素下的类A的元素？

<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选择器来实现吗？

来源

2012-04-10 Aras

基本CSS：

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

来源

2012-04-10 03:25:03 deceze

你确定适用于这种情况吗？我试过这个，但由于某种原因，它不适合我。 – Aras 2012-04-10 03:27:18

是的，它适用于这种情况。上述内容适用于任何具有“.class-B”作为其上方任何父级的'.class-A'。 – deceze 2012-04-10 03:28:20

感谢您的回复。它正在工作。这是我身边的一个愚蠢的错误。 – Aras 2012-04-10 04:19:31

两个类选择和后代组合子！

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

来源

2012-04-10 03:25:30 Ryan

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

http://jsfiddle.net/DpddQ/

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

来源

2012-04-10 03:25:46 mrtsherman

是的，有很多替代品，以这样的：

#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-10 03:25:47

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

回答

相关问题