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/