如何選擇具有類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的元素？

回答

相關問題