CSS直接派生選擇器

Question

我遇到了一些麻煩，我確信對於這個看似平凡的問題有一個簡單的解決方法。

我有我的HTML頁面設置與像如下：

<ul class="locations"> 
    <li> 
     Georgia 
     <ul class="children"> 
     <li> 
      Fulton County 
      <ul class="children"> 
       <li> 
        Atlanta 
       </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

我想要的風格「父母」列表項的一種方式，在「孩子」的一種方式，而「孫子」另一辦法。

我已經試過如下：

ul li{ 
    list-style: none; 
    margin: 0; 
} 
ul.locations li+ul.children li{ 
    margin-left: 15px; 
    clear: both; 
} 
ul.locationsli+ul.children li+ul.children li{ 
    float: left; 
} 

，我想在這種情況下，「孫子」旁邊漂浮到對方......不管我是如何工作的這是我們的，clear:both;似乎也適用到「兒童」和「孫子」項目。我也嘗試使用>作爲CSS選擇器，但沒有運氣。

修復此問題的任何想法？ TIA

Answer 1

你直接後裔（>）混亂的兄弟姐妹（~或+）。試試這個：

jsFiddle

ul li{ 
    list-style: none; 
    margin: 0; 
} 
ul.locations > li > ul.children > li{ 
    margin-left: 15px; 
    clear: both; 
} 
ul.locations > li > ul.children > li > ul.children > li{ 
    float: left; 
} 

Answer 2

你的例子根本沒有兄弟姐妹，但是從你所描述的你甚至不想使用兄弟選擇器（兄弟姐妹是層次結構中同一級別的元素）。基本上，如果你刪除所有的+s，但你還需要clear: none對孫子們有效。

ul li{ 
    list-style: none; 
    margin: 0; 
} 
ul.locations li ul.children li{ 
    margin-left: 15px; 
    clear: both; 
} 
ul.locations li ul.children li ul.children li { 
    float: left; 
    clear: none; 
} 

http://jsfiddle.net/pT8LA/