CSS選擇器只有在另一個元素內時才選擇一個元素

Question

我有一個關於CSS選擇器的問題。如何選擇<div>只有在<ul>的類名爲saft時纔有特定類名？這個CSS類在其他地方使用，我不想在任何地方改變樣式。

<div id="floater"> 
    <ul class="saft"> 
     <li><div class="textSlide"></li> 
    </ul> 
</div> 

Answer 1

父元素和後代元素之間只需使用CSS後代選擇器（空格）：

ul.saft div.textSlide { 
    /* CSS rules */ 
} 

JS Fiddle demo。

在這種情況下，規則適用於textSlide類的div如果它的祖先是類saft的ul只適用。你可以使用直接子組合器，>，但是你必須指定div與每個父/祖的關係，直到需要它的類爲止，這可能很難維護CSS（不是這個情況，但隨着時間的推移，它可能會成爲問題）。

Answer 2

只要做到：

ul.saft .textSlide {

這實現了你所需要的

Answer 3

可以方便地選擇，只有當一個類名SAFT的UL裏面像下面的CSS提到了一個特定的類名的div： -

ul.saft .textSlide { 
color:red; 
} 

或看演示： - http://tinkerbin.com/mcrh7iMq